element-ui el-tree非同步樹及父子節點選中過濾
阿新 • • 發佈:2020-11-03
需求:要求複選框非同步樹,父子關聯,得到選中的陣列,並進行過濾。比如父節點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 }) },