el-select組件包裹el-tree組件實現數據回顯

el-select組件包裹el-tree組件實現數據回顯

最近做項目要用到下拉框中存放樹型結構的數據，在網上找到可以使用el-select包裹el-tree實現，但是總是不能實現數據的回顯，用了一天時間，不斷嘗試，終於成功了,做個筆記，以防遺忘。

以下.json文件都是模擬數據

樹型結構數據   student.json

[{
            "id": 1,
            "name": "班干",
            "children": [{
              "id": "a1",
              "name": "潘藝文"
            }, {
              "id": "a2",
              "name": "葛安國"
            }, {
              "id": "a3",
              "name": "曹苗苗"
            }]
          },
          {
            "id": 2,
            "name": "學生",
            "children": [{
              "id": "a4",
              "name": "劉翠翠"
            }, {
              "id": "a5",
              "name": "李婷婷"
            }, {
              "id": "a6",
              "name": "韓夢雪"
            }]
          },
          {
            "id": 3,
            "name": "老師",
            "children": [{
              "id": "a7",
              "name": "朱永忠"
            }, {
              "id": "a8",
              "name": "施璐"
            }, {
              "id": "a9",
              "name": "王伽珞"
            }, {
              "id": "a10",
              "name": "張琳"
            }]
          },
          {
            "id": 4,
            "name": "輔導員",
            "children": [{
              "id": "a7",
              "name": "刁莉莉"
            }]
          },
          {
            "id": 5,
            "name": "其他",
            "children": []
          }
        ]

index.vue

<el-button type="primary" @click="echoData">模擬數據回顯</el-button>
          <el-select placeholder="請選擇" v-model="currentValue" multiple collapse-tags @change="selectChange">
            <el-option style="height:auto" :value="selectData">
              <el-tree :data="studentTreeData" ref="studentTree" node-key="id" :props="defaultProps"  show-checkbox :check-strictly="true" @check-change="handleCheckChange"></el-tree>
            </el-option>
  </el-select>

以上文件的關鍵點屬性及方法

el-select

multiple 是否多選

collapse-tags 多選時是否按文字的形式展示

selectChange 選中的數據發生改變時觸發

 v-model="currentValue"  下拉框中被選中的值  (字符串類型)

el-option

style="height:auto"  設置下拉的高度被內容撐開(不然內容會被遮住)

:value="selectData" 下拉框中的數據 (數組類型)

el-tree

:data="studentTreeData" 屬性結構要展現的數據

 node-key="id" 規范節點的唯一性

:props="defaultProps" 規定樹型結構要展示哪些內容

show-checkbox 樹型結構可選

:check-strictly="true" 父子節點不關聯 ，可以用到父節點禁止選中

@check-change="handleCheckChange" 節點選中狀態發生變化時的回調

js代碼  其中的echo.json表示要回顯的數據

<script>
  export default {
    data() {
      return {
        defaultProps: { //樹型圖配置
          children: "children", //指定子樹為節點對象的某個屬性值
          label: "name" //指定節點標簽為節點對象的某個屬性值
        },
        studentTreeData: [],
        currentValue:"",//當前被選中下拉框中的值
        selectData:[],//下拉框中的選項數據
      }
    },
    mounted() {

    },
    methods: {
      // 禁止父節點被點擊
      disabledParent(data) {
        data.forEach((node) => {
          if (node.children) {
            node.disabled = true;
            this.disabledParent(node.children)
          } else {
            return
          }
        })
        return data;
      },
      // 下拉框中的數據發生改變
      selectChange(data){
        let arrNew=[];
        let selectLength=this.selectData.length;
        let dataLength=data.length;
        for(let i=0;i<selectLength;i++){
          for(let j=0;j<dataLength;j++){
            if(data[j]===this.selectData[i].name){
              arrNew.push(this.selectData[i])
            }
          }
        }
        this.$refs.studentTree.setCheckedNodes(arrNew);//設置勾選的值

      },
      // 樹型結構選項框被點擊發生改變
       handleCheckChange(){
         let checkeArr=this.$refs.studentTree.getCheckedNodes(true);//true表示只包含葉子節點
         // this.currentValue=checkeArr;
         // console.log(checkeArr)
         let arrLabel=[];
         let arr=[];
         checkeArr.forEach((item,index)=>{
           arrLabel.push(item.name);
           arr.push(item)
         })
         this.currentValue=arrLabel; //select
         this.selectData=arr; // option
      },
      // 點擊回顯數據
      echoData(){
          this.$http.get("http://localhost:3000/public/echo.json").then(res => {
            console.log(res.data)
            var arr=[]
            res.data.forEach(item=>{
              arr.push(item.name)
            })
           // arr=arr.join(",")
            setTimeout(()=>{
              res.data.forEach(item=>{
                this.$refs.studentTree.setChecked(item,true)
                this.currentValue=res.data;
                this.selectData=arr;
              },500)
            })
          })
      }

    }
  };
</script>

 需要回顯的數據 echo.json

[{
    "id": "a1",
    "name": "潘藝文"
}, {
    "id": "a2",
    "name": "葛安國"
}, {
    "id": "a3",
    "name": "曹苗苗"
}, {
    "id": "a4",
    "name": "劉翠翠"
}, {
    "id": "a5",
    "name": "李婷婷"
}, {
    "id": "a6",
    "name": "韓夢雪"
}]