element ui 级联选择器懒加载

最近项目中需要使用链接选择器将展开项的值作为参数调用接口，找了好多方法，然后使用了动态加载子节点，与 lazyLoad 方法结合使用，实现了

代码：

<el-form-item label="地点:" prop="locale">

                <el-cascader

                  :props="props"

                  v-model="SLA.locale"

                  :options="rule.building"

                  collapse-tags

                />

              </el-form-item>

 

 

<script>

　　　export default{

　　　　　data(){

　　　　　　　return{

　　　　　　　  

props: {

        multiple: true, //是否多选

        checkStrictly: true, //是否严格的遵守父子节点不互相关联      我这里是要多选，要是单选的这个两个属性可以不用加

        label: 'name',//注意，这个label值显示的需要每次调接口时返回的数据中字段都要为'name',不然会出现每层的label数据都是一样的

        lazy: true,  //是否动态加载子节点

        async lazyLoad(node, resolve) {    //function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)

          const { data } = node

          if (data && data.children && data.children.length !== 0) {

            return resolve([])

          }

          const params = {

          }

          if (data) {   //判断data是不是空，如果不是，将data中的某个数据拿出来作为参数传递

            params['block'] = data['siteId'] || ''

            params['blId'] = data['blId'] || ''

            params['flId'] = data['flId'] || ''

          }

          // console.log(data)

          // console.log(params)

          try {

           // const r = await getLocation(params)   调用接口

            const targetData = []

            for (const item of r.data) {

//将拿到的数据一层一层拿出来处理

              const temp = {

                siteId: item['siteId'] || '',

                blId: item['blId'] || '',

                flId: item['flId'] || '',

                rmId: item['rmId'] || '',

                name: item['name'] || '未命名',

                leaf: item['leaf'], //后端数据中leaf一开始要为false,最后一次的时候才为true 

                children: item['children'] || []

              }

              temp['value'] = temp['rmId'] || temp['flId'] || temp['blId'] || temp['siteId']   //将拿出来的值从小到大赋值

              targetData.push(temp)//然后push到节点中

            }

            resolve(targetData)

          } catch (e) {

            console.log(e)

            resolve([])

          }

        }

      },

SLA:{

　　

 locale: [],

　　

},

rule:{

building: []

}

　},

methods:{

 

 

}

}

}　

 

　　

</script>