element-ui 级联选择器（Cascader）使用懒加载的回显

element-ui 级联选择器（Cascader）使用懒加载的回显

• 当我在回来看这篇文档的时候，我觉得我已经把懒加载写好了，基础的懒加载使用方法就不做记录了，如果不会移步这里
• 我目前的使用场景：

1. 根据部门选择了销售人员，四级联动
2. 给销售人员分配业务区域，for循环，动态添加， 四级联动

• 在回显的时候，因为懒加载数据并没有结束，所以会导致我们的虽然赋值成功，但是不会展示，此时我们值需要在一级列表内，对应的值的对象中添加一个children对象并赋值为空数组即可 直接上代码
• html部分

	<el-form ref="businessForm" :model="businessForm" label-width="80px">
       <el-form-item v-if="userId === 0" label="销售成员" prop="name" :rules="{required: true, message: '请选择销售成员', trigger: 'blur'}">
         <el-cascader v-model="businessForm.name" :props="userProps" />
       el-form-item>
       <el-form-item v-else label="销售成员" >
         <el-input :value="userName" class="name-int" disabled />
       el-form-item>
       <el-form-item
         v-for="(item, index) in businessForm.areaList"
         :key="item.id"
         :label="index === 0 ? '业务区域' : ''"
         :prop="'areaList.' + index + '.value'"
         :rules="{required: false, validator: validArea, trigger: 'blur'}"
       >
         <div>
           <el-cascader
             v-model="item.value"
             class="mr-10"
             :props="areaPropsFun(item, index)"
           />
           <el-button type="primary" plain @click="businessForm.areaList.splice(index + 1, 0, {value: '', id: Math.random().toString(16).slice(2)}) ">+el-button>
           <el-button v-if="businessForm.areaList.length > 1" type="danger" plain @click="businessForm.areaList.splice(index, 1)">-el-button>
         div>
       el-form-item>
     el-form>

• js部分

  data() {
    const that = this
    const validArea = (rule, value, callback) => {
	    // 校验方法
    }
    return {
      businessForm: {
        name: '',
        areaList: []
      },
      userProps: {
        lazy: true,
        async lazyLoad (node, resolve) {
          const { level } = node;
          let data = []
          // 获取数据 data = xxx
          resolve(data)
        }
      },
      areaPropsFun(item) {
        // item为业务区域对应的值
        let lazyLoad = async (node, resolve) => {
          const { level } = node;
          let data = []
          // 获取数据 data = xxx
          // 
          if (level === 0) {
          	data = [
				{
					label: "一级数据1",
					value: "1"
				},
				{
					label: "一级数据2",
					value: "2"
				},
				{
					label: "一级数据3",
					value: "3"
				}
			]
			// 这里只是举例，具体的看业务
			// 如果选中的一级数据是2那直接给data[1]添加children就可以了 后面组件会自动补全
			if (item.value[0] === '2') {
				data[1].children = []
			}
          }
          resolve(data)
        }
        return {
          lazy: true,
          lazyLoad
        }
      },
      validArea
    }
  }

ps: 此文章做个人平常记录，若是有幸帮到朋友，但求一赞