1. 程式人生 > 實用技巧 >element-ui el-tree非同步樹及父子節點選中過濾

element-ui el-tree非同步樹及父子節點選中過濾

需求:要求複選框非同步樹,父子關聯,得到選中的陣列,並進行過濾。比如父節點A被選中,則其子節點自動被選中,需要過濾只留下父節點傳給後臺,資料結構較為清晰。

非同步樹html

            <el-tree
              ref="asyncTree"
              :data="dataAsync"
              :load="loadNode"
              show-checkbox
              :props="defaultProps"
              :node-key="nodeKey"
              :parent-key="parentIndexCode"
              :lazy = "lazySelect"
              :default-expand-keys="defaultExpandKeys"
              :default-checked-keys="defaultCheckedKeys"
              @node-click="handleNodeClick"
              @check-change="handleCheckChange"
            >
              <span
                slot-scope="{data}"
                class="treeIcon"
              >
                <span
                  :title="data.name"
                  class="el-tree-node__label"
                >
                  {{ data.name }}
                </span>
                <span
                  v-if=" data.pushStatus "
                  class="pushFlag"
                >
                  {{ category[data.category] }}
                </span>
              </span>
            </el-tree>

@check-change="handleCheckChange" 在複選框選中狀態發生變化時被自動呼叫
:default-checked-keys="defaultCheckedKeys" 設定預設被選中的節點
的內容可以進行自己用slot自己定義,但是和render-content屬性不相容,渲染方式選擇一種即可。

選中組織父子過濾

    // 複選框狀態發生變化觸發事件
    handleCheckChange (checkedNodes, isChecked, isTreeChecked) {
      // 獲得目前被選中的節點集合
      this.checkedSum = this.$refs.asyncTree.getCheckedNodes()
      // 對比checkedSum和checked去重,將搜尋樹的資料去掉
      this.filterChecked(this.checkedSum)
    },


    // 過濾子組織和父組織的重複選中
    filterChecked (checked) {
      // 獲得選中集合的node-key
      const indexCodeList = checked.map(function (item) {
        return item.indexCode
      })
      // 判斷node-key是否含有parent-key
      checked.map(function (value, index) {
        if (indexCodeList.indexOf(value.parentIndexCode) !== -1) {
          checked.splice(index, 1, 1)
        }
      })
      this.checkedFilter = checked.filter(function (value) { return value !== 1 })
    },