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", //默認(rèn)主鍵
      defaultRootId: "root", //默認(rèn)根節(jié)點(diǎn)ID就是root
      form: {},
      props: {
        lazy: true,
        expandTrigger: "hover",
        multiple: false,
        checkStrictly: this.checkStrictly === "" || this.checkStrictly, //是否支持選中非葉子節(jié)點(diǎn)（是否嚴(yán)格的遵守父子節(jié)點(diǎn)不互相關(guān)聯(lián)	）
        lazyLoad: (node, resolve) => {
          this.loadNodeData(
            node.level === 0 ? { [this.mainKey]: this.defaultRootId } : node.data,
            (d) => resolve(d)
          );
        },
      },
    };
  },
  props: [
    "value",
    "oldValue", //回顯上次的數(shù)據(jù)(當(dāng)級(jí)聯(lián)菜單數(shù)據(jù)是懶加載模式的時(shí)候使用，這里是顯示值不是實(shí)際ID，提供給用戶觀察的值)
    "data",
    "placeholder",
    "clearable",
    "checkStrictly", //是否允許選中非葉子節(jié)點(diǎn)
  ],
  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); //根節(jié)點(diǎn)ID
        d.value && (this.props.value = d.value); //指定選項(xiàng)的值為選項(xiàng)對象的某個(gè)屬性值
        d.label && (this.props.label = d.label); //指定選項(xiàng)標(biāo)簽為選項(xiàng)對象的某個(gè)屬性值
        d.children && (this.props.children = d.children); //指定選項(xiàng)的子選項(xiàng)為選項(xiàng)對象的某個(gè)屬性值
        d.expandTrigger && (this.props.expandTrigger = d.expandTrigger); //次級(jí)菜單的展開方式click / hover
        d.hasOwnProperty("multiple") && (this.props.multiple = d.multiple); //是否多選
        d.hasOwnProperty("lazy") && (this.props.lazy = d.lazy); //是否動(dòng)態(tài)加載子節(jié)點(diǎn)，需與 lazyLoad 方法結(jié)合使用
      },
      deep: true,
      immediate: true,
    },
    oldValue(d) {
      this.showOldValue(d);
    },
  },
  mounted() {
    this.oldValue && this.showOldValue(this.oldValue);
  },
  methods: {
    // 回顯級(jí)聯(lián)菜單上次的數(shù)據(jù)
    showOldValue(d) {
      let input = this.$el.querySelector(`input`);
      input && (input.value = d);
    },
    // 加載節(jié)點(diǎn)數(shù)據(jù)（通過接口向后臺(tái)獲取數(shù)據(jù)）
    loadNodeData(data, cb) {
      let resolve = (d) => {
        cb && cb(d);
      };
      this.$emit(`loadNode`, { data, resolve });
    },
    // 當(dāng)選中節(jié)點(diǎn)變化時(shí)觸發(fā)	[回調(diào)參數(shù)]選中節(jié)點(diǎn)的值
    change(d) {
      this.$emit(`change`, d);
    },
    // 當(dāng)展開節(jié)點(diǎn)發(fā)生變化時(shí)觸發(fā)	[回調(diào)參數(shù)]各父級(jí)選項(xiàng)值組成的數(shù)組
    expandChange(d) {
      this.$emit(`expandChange`, d);
    },
    // 	當(dāng)失去焦點(diǎn)時(shí)觸發(fā)	[回調(diào)參數(shù)](event: Event)
    blur(d) {
      this.$emit(`blur`, d);
    },
    // 當(dāng)獲得焦點(diǎn)時(shí)觸發(fā)	[回調(diào)參數(shù)](event: Event)
    focus(d) {
      this.$emit(`focus`, d);
    },
    // 下拉框出現(xiàn)/隱藏時(shí)觸發(fā)	[回調(diào)參數(shù)]出現(xiàn)則為 true，隱藏則為 false
    visibleChange(d) {
      this.$emit(`visibleChange`, d);
    },
    // 在多選模式下，移除Tag時(shí)觸發(fā)	[回調(diào)參數(shù)]移除的Tag對應(yīng)的節(jié)點(diǎn)的值
    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: {
    // 加載節(jié)點(diǎn)數(shù)據(jù)
    loadNode({ data, resolve }) {
      this.$d.column_queryByPid({
        data: { PID: data.ID },
        doing: { s: (d) => resolve(d) },
      });
    },
    // 回顯級(jí)聯(lián)菜單上次的數(shù)據(jù)
    initSgLazyCascadeOldValue(d) {
      this.sgLazyCascader_oldValue = "回顯信息1 / 回顯信息2";
    },
  },
};
</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-702714.html

到了這里，關(guān)于【sgLazyCascader】自定義組件：基于el-cascader的懶加載級(jí)聯(lián)菜單，支持異步加載子級(jí)菜單的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！