【sgLazyCascader】自定义组件：基于el-cascader的懒加载级联菜单，支持异步加载子级菜单

<template>
  <el-cascader
    :class="$options.name"
    style="width: 100%"
    :props="props"
    v-model="model"
    :placeholder="placeholder || '请选择'"
    :options="options"
    :clearable="clearable === '' || clearable"
  ></el-cascader>
</template>
<script>
export default {
  name: "sgLazyCascader",
  data() {
    return {
      model: null,
      mainKey: "id", //默认主键
      defaultRootId: "root", //默认根节点ID就是root
      form: {},
      props: {
        lazy: true,
        expandTrigger: "hover",
        multiple: false,
        checkStrictly: this.checkStrictly === "" || this.checkStrictly, //是否支持选中非叶子节点（是否严格的遵守父子节点不互相关联  ）
        lazyLoad: (node, resolve) => {
          this.loadNodeData(
            node.level === 0 ? { [this.mainKey]: this.defaultRootId } : node.data,
            (d) => resolve(d)
          );
        },
      },
    };
  },
  props: [
    "value",
    "options", //回显的时候使用
    "data",
    "placeholder",
    "clearable",
    "checkStrictly",
  ],
  watch: {
    value: {
      handler(d) {
        this.model = d;
      },
      deep: true,
      immediate: true,
    },
    model(d) {
      this.$emit("input", d);
    },
    data: {
      handler(d) {
        d.nodeKey && (this.mainKey = d.nodeKey); //主键
        d.rootId && (this.defaultRootId = d.rootId); //根节点ID
        d.value && (this.props.value = d.value); //指定选项的值为选项对象的某个属性值
        d.label && (this.props.label = d.label); //指定选项标签为选项对象的某个属性值
        d.children && (this.props.children = d.children); //指定选项的子选项为选项对象的某个属性值
        d.expandTrigger && (this.props.expandTrigger = d.expandTrigger); //次级菜单的展开方式click / hover
        d.hasOwnProperty("multiple") && (this.props.multiple = d.multiple); //是否多选
        d.hasOwnProperty("lazy") && (this.props.lazy = d.lazy); //是否动态加载子节点，需与 lazyLoad 方法结合使用
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 加载节点数据（通过接口向后台获取数据）
    loadNodeData(data, cb) {
      let resolve = (d) => {
        cb && cb(d);
      };
      this.$emit(`loadNode`, { data, resolve });
    },
  },
};
</script>

<template>
  <div :class="$options.name">
    <sgLazyCascader
      v-model="value"
      :data="{
        nodeKey: `ID`, //主键
        value: `ID`,
        label: 'MC',
      }"
      :options="options"
      placeholder="请选择"
      @loadNode="loadNode"
    />
  </div>
</template>
<script>
import sgLazyCascader from "@/vue/components/admin/sgLazyCascader";
export default {
  components: {
    sgLazyCascader,
  },
  data() {
    return {
      value: [],
      options: [],
    };
  },
  methods: {
    // 加载节点数据
    loadNode({ data, resolve }) {
      this.$d.column_queryByPid({
        data: { PID: data.ID },
        doing: { s: (d) => resolve(d) },
      });
    },
  },
};
</script>