el-cascader 懒加载数据与自动回显完整代码

<template>
  <div> 
    <el-cascader v-model="cat_ids" v-if="showCascader" filterable :props="props" class="w-460px" @change="handleChange" />
    <el-input  v-if="!showCascader" class="w-460px"/>
  </div>
</template>

<script>
import { PDD } from '@/apis';

export default {
  props: ['detail'],
  data() {
    return {
      cat_ids: [],
      catOptions: [],
      showCascader: false,
      props: {
        lazy: true,
        lazyLoad: this.catLazyLoad
      }
    }
  },
  mounted() { 
  },
  watch: {
    detail(val) { 
      const params = {
        cat_id: val.cat_id, 
      }
      $api.接口名称(params).then(res => {
        const data = res.list 
        this.cat_ids =[id1, id2, id3] // 数据回显时后端返回的选中项所有id集合
        this.showCascader = true 
      })
    }
  },
  methods: {
    async catLazyLoad(node, resolve) {
      const { level } = node;
      const parent_cat_id = level ? node.value : level
      let res = await $api.接口名称({ parent_cat_id })
      const data = res.list
      const nodes = data.length && data.map(item => ({
        value: item.cat_id,
        label: item.cat_name,
        leaf: item.leaf
      }));
      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      resolve(nodes);
    },
    handleChange() { 
      this.$emit('select', this.cat_ids)// [1, 2, 3]
    }, 
  },
}
</script>

<style scoped lang="less"></style>