快捷導(dǎo)航

基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼

更新時(shí)間：2024年03月07日 10:07:49 作者：gyuhao_o

這篇文章主要介紹了基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、關(guān)鍵代碼

<template>
  <div>
    <!-- 左側(cè)待選列表 -->
    <div class="left-box">
      <p>待選列表</p>
      <el-input placeholder="輸入關(guān)鍵詞過(guò)濾" v-model="leftFilterText" clearable/>
      <el-tree
        ref="treeLeft"
        :data="leftData"
        show-checkbox
        node-key="id"
        props="defaultProps"
        :load="loadNode"
        lazy
        :filter-node-method="filterNode"  
      >
      </el-tree>
    </div>
    <!-- 穿梭按鈕 -->
    <div class="oper-box">
      <el-button circle type="primary" icon="el-icon-arrow-left" @click="removeData"></el-button>
      <el-button circle type="primary" icon="el-icon-arrow-right" @click="addData"></el-button>
    </div>
    <div class="right-box">
      <p>已選列表</p>
      <el-input placeholder="輸入關(guān)鍵詞過(guò)濾" v-model="rightFilterText" clearable/>
      <el-tree
        ref="treeRight"
        :data="rightData"
        show-checkbox
        node-key="id"
        props="defaultProps"
        :filter-node-method="filterNode"  
      >
      </el-tree>
    </div>
  </div>
</template>
<script>
  data(){
    return {
      checkAll: false,
      leftFilterText: '',
      rightFilterText: '',
      defaultProps: {
        chilren: 'children',
        label: 'labelName',   // 適配后端下發(fā)的數(shù)據(jù)字段名
        isLeaf: 'leaf',   // leaf 字段判斷節(jié)點(diǎn)是否為葉子節(jié)點(diǎn)
        // 配置禁選的節(jié)點(diǎn)
        disabled: function(data, node) {
          // 如這里配置父節(jié)點(diǎn)、帶有disable屬性的節(jié)點(diǎn)禁選
          if('children' in data || data.disable) {
            return true;
          } else {
            return false;
          }
        }
      },
      leftData: [],
      rightData: []
    }
  },
  watch: {
    leftFilterText(val) {
      this.$refs.treeLeft.filter(val);
    },
    rightFilterText(val) {
      this.$refs.treeRight.filter(val);
    }
  },
  methods: {
    // 根據(jù)關(guān)鍵詞過(guò)濾節(jié)點(diǎn)
    filterNode(value, data) {
      if(!value) return true;
      // labeName 為defaultProps中配置的label值，未配置默認(rèn)為label
      return data.labeName.indexOf(value) !== -1;
    },
    // 懶加載出樹(shù)結(jié)構(gòu)的最后一層節(jié)點(diǎn)
    async loadNode(node, resolve) {
      if(node.level === 0) {
        return resolve(node.data);   // 頂層數(shù)據(jù)默認(rèn)展示
      } else {
        if(node.data.children && node.data.children.length > 0) {
          return resolve(node.data.children);
        } else {  // 最后一層數(shù)據(jù)，異步懶加載
          let tempData = await this.getDynamicData(node.data.id);
          return resolve(tempData);
        }
      }
    },
    // 獲取數(shù)據(jù)接口
    getDynamicData(id) {
    },
    // 移除節(jié)點(diǎn)
    removeData() {
      // 右側(cè)選中節(jié)點(diǎn)
      let removeKeys = this.$refs.treeRight.getCheckedKeys();
      this.rightData = this.rightData.filter(item => !removeKeys.includes(item.id));
      // 左側(cè)：僅保留右側(cè)列表中有的數(shù)據(jù)為勾選狀態(tài)
      let leftCheckKeys = this.rightData.map(item => item.id);
      this.$refs.treeLeft.setCheckedKeys(leftCheckKeys);
    },
    // 添加節(jié)點(diǎn)
    removeData() {
      // 獲取左側(cè)選中節(jié)點(diǎn)，作為右側(cè)的數(shù)據(jù)
      let checkNodes = this.$refs.treeLeft.getCheckedNodes();
      let checkKeys = this.$refs.treeLeft.getCheckedKeys();
      this.rightData = checkNodes;
    },
  }
</script>

?? 過(guò)濾節(jié)點(diǎn)函數(shù)：filterNode

1、watch 監(jiān)聽(tīng)關(guān)鍵詞；filterNode 必須有返回值，否則數(shù)據(jù)顯示不出來(lái)；

2、關(guān)鍵詞不為空時(shí)，函數(shù)的返回值 data.labeName.indexOf(value) !== -1; 其中 labeName 為defaultProps中配置的label值，未配置默認(rèn)為label

?? 異步加載函數(shù)：loadNode

根據(jù) node.level 去匹配數(shù)據(jù)層級(jí)，判斷是否需要調(diào)用接口獲取數(shù)據(jù)

?? 樣式自定義