el-tree 單選

1 創(chuàng)建一個(gè)js,過濾樹形數(shù)組,包含children的選項(xiàng)均禁用

export  const  filterTreeData = (treeData) => {
    return treeData.filter(item => {
        if (isNotEmpty(item.children)) {
            item.disabled = true;
            item.children = filterTreeData(item.children)
        }
        return item
    })
}
const isNotEmpty = (arr) => {
  return arr && Array.isArray(arr) && arr.length > 0;
}

2 在頁(yè)面上使用

<template>
 <el-tree
                class="filter-tree"
                :data="treeData"
                :props="defaultProps" 
                @check="checkChange"
                node-key="name"
                accordion 
                check-strictly
                highlight-current
                show-checkbox 
                :auto-expand-parent = "true"
                :default-expanded-keys="defaultArr"
                :default-checked-keys="defaultArr"
                ref="tree">
              </el-tree>
</template>
<script>
import {filterTreeData} from '../../../plugins/dealTree';//處理只能選擇最后一個(gè)節(jié)點(diǎn)

data() {
    return {
      treeData:[],
       defaultProps: {
          children: 'children',
          label: 'name'
        },//過濾使用字段
        defaultArr:[]
      }
    }
methods: {
 refreshTree() {
      const vm = this;
      vm.treeData = [...vm.treeData];
    },
     // //獲取數(shù)據(jù)
    async getRuleData(){
      let ruleData = []   //獲取非樹型格式的數(shù)據(jù)
      this.treeData = this.listToTreeLoop(ruleData)
      filterTreeData(this.treeData);
    },
      /** 控制樹形單選 */
      checkChange(data, checked) {
            if (checked) {
                if (!!data.children && data.children.length>0) {
                    console.log("有子節(jié)點(diǎn)不可選")
                }else{
                    this.checkedData = data;
                    this.ruleId = data._id
                    this.selectleveList = data;
              //選中時(shí)需要回顯的值可在這里操作
                ......  
                    this.$refs.tree.setCheckedKeys([data.name]);
                    this.defaultArr=[data.name]
                }
            }
        },

    //數(shù)據(jù)組裝
    listToTreeLoop(data){
      //數(shù)據(jù)組裝為樹型
    },
}

</script>


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容