关于element UI的级联选择器回写渲染问题

在使用elementUI的过程中，很多时候都会出现数据渲染不显示的问题（回写），其实之前在使用echarts时也有类似的问题。
这次这个问题的关键就是同一个组件，在另一个系统中使用毫无问题，换一个系统，回写就问题来了，不显示，断点都打成扫雷了，很无奈。。。。。

（其实多数这种情况都是Vue生命周期的问题，从这方面下手比较靠谱，———组件本身有问题除外）

看一下我用的组件代码：

<template>
  <div>
    <!-- 统筹区 -->
    <el-cascader
      ref="cascader"
      v-model="selectValue"
      style="width: 100%"
      :props="props"
      :value="value"
      clearable
      filterable
      :disabled="isDisabled"
      :show-all-levels="false"
      @input="handleSelectChange($event)"
    >
      <template
        slot-scope="{ node, data }"
        class="cascader-item"
      >
        <span
          class="select-item"
          @click="handleSelect"
        >{{data.label}}</span>
      </template>
    </el-cascader>
  </div>
</template>

<script type="text/javascript">
import {
  getPosition
} from '@/api/Common/Request'
export default {
  components: {},
  props: {
    value: {
      type: [Array, String],
      default: function() {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectValue: [],
      options: [],
      props: {
        lazy: true,
        checkStrictly: true,
        expandTrigger: 'hover',
        lazyLoad(node, resolve) {
          const { level } = node
          getPosition({ subCode: level === 0 ? '0' : node.value,codeType: 'zctree' }).then(
            res => {
              if (res.code === 0) {
                let nodes = []
                if (res.data.length > 0) {
                  nodes = res.data.map(item => ({
                    value: item.codeValue,
                    label: item.codeName,
                    // leaf: level >= 4
                  }))
                }
                resolve(nodes)
              }
            }
          )
        }
      }
    }
  },

  watch: {
    value: {
      handler(val) {
          if (this.$refs.cascader) {
          this.selectValue = val
          var children = this.$refs.cascader.getCheckedNodes()
          this.$refs.cascader.dropDownVisible = false //监听值发生变化就关闭它
          if (Object.prototype.toString.call(val) === '[object String]') {
            this.selectValue = val.split(',')
          }
        })
        
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    handleSelectChange(v) {
      this.$emit('input', v.join(','))
    },
    handleSelect(e) {
      let parentPreviousElement = e.target.parentElement.previousElementSibling
      let inputRadio = parentPreviousElement.children[0].children[1]
      inputRadio.click()
    }
  }
}
</script>

<style lang="scss">
.el-select {
  width: 100%;
}
.el-cascader-panel .el-radio {
  position: absolute;
  z-index: 10;
  padding: 0 10px;
  width: 132px;
  height: 34px;
  line-height: 34px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-input-node__postfix {
  top: 10px;
}
</style>

就是这一小段，开始我觉得肯定是异步加载导致的这个问题，但想想他element团队做这个封装没道理不考虑进去这个问题的啊，然后另一个系统上确实能使用，正常符合需求，那我就受不了了啊！！
这不找出问题，很难受的。
过程太难叙述了，结果还是看代码吧，哈哈哈

<template>
  <div>
    <!-- 统筹区 -->
    <el-cascader
      ref="cascader"
      v-model="selectValue"
      style="width: 100%"
      :props="props"
      :value="value"
      clearable
      filterable
      :disabled="isDisabled"
      :show-all-levels="false"
      @input="handleSelectChange($event)"
    >
      <template
        slot-scope="{ node, data }"
        class="cascader-item"
      >
        <span
          class="select-item"
          @click="handleSelect"
        >{{data.label}}</span>
      </template>
    </el-cascader>
  </div>
</template>

<script type="text/javascript">
import {
  getPosition
} from '@/api/Common/Request'
export default {
  components: {},
  props: {
    value: {
      type: [Array, String],
      default: function() {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectValue: [],
      options: [],
      props: {
        lazy: true,
        checkStrictly: true,
        expandTrigger: 'hover',
        lazyLoad(node, resolve) {
          const { level } = node
          getPosition({ subCode: level === 0 ? '0' : node.value,codeType: 'zctree' }).then(
            res => {
              if (res.code === 0) {
                let nodes = []
                if (res.data.length > 0) {
                  nodes = res.data.map(item => ({
                    value: item.codeValue,
                    label: item.codeName,
                    // leaf: level >= 4
                  }))
                }
                resolve(nodes)
              }
            }
          )
        }
      }
    }
  },

  watch: {
    value: {
      handler(val) {
        this.$nextTick(() => { //+的这个
          if (this.$refs.cascader) {
          this.selectValue = val
          var children = this.$refs.cascader.getCheckedNodes()
          this.$refs.cascader.dropDownVisible = false //监听值发生变化就关闭它
          if (Object.prototype.toString.call(val) === '[object String]') {
            this.selectValue = val.split(',')
          }
        }
        })
        
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    handleSelectChange(v) {
      this.$emit('input', v.join(','))
    },
    handleSelect(e) {
      let parentPreviousElement = e.target.parentElement.previousElementSibling
      let inputRadio = parentPreviousElement.children[0].children[1]
      inputRadio.click()
    }
  }
}
</script>

<style lang="scss">
.el-select {
  width: 100%;
}
.el-cascader-panel .el-radio {
  position: absolute;
  z-index: 10;
  padding: 0 10px;
  width: 132px;
  height: 34px;
  line-height: 34px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-input-node__postfix {
  top: 10px;
}
</style>

就是使用了this.$nextTick（），说到底他双向绑定的变量的值还是要等到页面加载完成之后再去访问props的对象才能回显，问题是为什么另一个系统的使用又不存在这个问题，我萌了。
但是这个方式还是有点慢，体验不是太好，之后要是改了并且还记得就来更新。。。。。。