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

sgLazyCascader源码

<template>
  <el-cascader
    :class="$options.name"
    style="width: 100%"
    :props="props"
    v-model="model"
    :placeholder="placeholder || '请选择'"
    :clearable="clearable === '' || clearable"
    @change="change"
    @expand-change="expandChange"
    @blur="blur"
    @focus="focus"
    @visible-change="visibleChange"
    @remove-tag="removeTag"
  ></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",
    "oldValue", //回显上次的数据(当级联菜单数据是懒加载模式的时候使用，这里是显示值不是实际ID，提供给用户观察的值)
    "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,
    },
    oldValue(d) {
      this.showOldValue(d);
    },
  },
  mounted() {
    this.oldValue && this.showOldValue(this.oldValue);
  },
  methods: {
    // 回显级联菜单上次的数据
    showOldValue(d) {
      let input = this.$el.querySelector(`input`);
      input && (input.value = d);
    },
    // 加载节点数据（通过接口向后台获取数据）
    loadNodeData(data, cb) {
      let resolve = (d) => {
        cb && cb(d);
      };
      this.$emit(`loadNode`, { data, resolve });
    },
    // 当选中节点变化时触发	[回调参数]选中节点的值
    change(d) {
      this.$emit(`change`, d);
    },
    // 当展开节点发生变化时触发	[回调参数]各父级选项值组成的数组
    expandChange(d) {
      this.$emit(`expandChange`, d);
    },
    // 	当失去焦点时触发	[回调参数](event: Event)
    blur(d) {
      this.$emit(`blur`, d);
    },
    // 当获得焦点时触发	[回调参数](event: Event)
    focus(d) {
      this.$emit(`focus`, d);
    },
    // 下拉框出现/隐藏时触发	[回调参数]出现则为 true，隐藏则为 false
    visibleChange(d) {
      this.$emit(`visibleChange`, d);
    },
    // 在多选模式下，移除Tag时触发	[回调参数]移除的Tag对应的节点的值
    removeTag(d) {
      this.$emit(`removeTag`, d);
    },
  },
};
</script>

用例

<template>
  <div :class="$options.name">
    <sgLazyCascader
      :oldValue="sgLazyCascader_oldValue"
      v-model="value"
      :data="{
        nodeKey: `ID`, //主键
        value: `ID`,
        label: 'MC',
      }"
      placeholder="请选择"
      @loadNode="loadNode"
    />
  </div>
</template>

<script>
import sgLazyCascader from "@/vue/components/admin/sgLazyCascader";
export default {
  components: {
    sgLazyCascader,
  },
  data() {
    return {
      sgLazyCascader_oldValue: null,
      value: [],
    };
  },
  methods: {
    // 加载节点数据
    loadNode({ data, resolve }) {
      this.$d.column_queryByPid({
        data: { PID: data.ID },
        doing: { s: (d) => resolve(d) },
      });
    },
    // 回显级联菜单上次的数据
    initSgLazyCascadeOldValue(d) {
      this.sgLazyCascader_oldValue = "回显信息1 / 回显信息2";
    },
  },
};
</script>

文章来源地址https://www.toymoban.com/news/detail-702714.html

到了这里，关于【sgLazyCascader】自定义组件：基于el-cascader的懒加载级联菜单，支持异步加载子级菜单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！