vue-element-admin一個基于 vue2.0 和 Eelement 的控制面板 UI 框架，這是使用vue技術(shù)棧開發(fā)的前端程序員的首選管理系統(tǒng)模板，模板以及非常的成熟了，并且有相關(guān)的社區(qū)和維護人員，開發(fā)時候遇到問題也不要慌。

推薦指數(shù)：
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文檔：https://panjiachen.github.io/vue-element-admin-site/zh/

今天就來說一下，vue如何獲取Elementui Tree 樹形控件當前選中的節(jié)點。廢話不多說，首先看一下官方文檔吧，看看官方文檔是怎么給到的例子吧：

Tree 樹形控件文檔：https://element.eleme.cn/#/zh-CN/component/tree

要求：
Elementui Tree 樹形控件，將勾選選中的值放在list集合里面提交

提交格式是這樣的，也就是將勾選項放在一個數(shù)組里面，作為參數(shù)提交給后端即可。

步驟：
這里我用到了json本地的數(shù)據(jù)，因為掉接口數(shù)據(jù)，不太方便寫demo，后面統(tǒng)一都用到mock，json數(shù)據(jù)了，如果需要用到項目里面，后面直接修改一下

將

   //獲取樹權(quán)限節(jié)點接口定義
    getZtreeList() {
      this.dataLoading = true;
      import("./mock").then((res) => {
        this.setTree = res.data;
        this.organList = res.data.map((a) => ({
          label: a.description,
          value: a.id,
        }));
        this.getListData();
        this.dataLoading = false;
      });
    },

改成這樣即可

//調(diào)用接口
import {getZtreeList} from "@/api/permission/role";

 //獲取樹權(quán)限節(jié)點接口定義
    getZtreeList() {
      this.dataLoading = true;
      getZtreeList(params).then((res) => {
        this.setTree = res.data; 
         this.organList = res.data.map((a) => ({
          label: a.description,
          value: a.id,
        }));
        this.getListData();
        this.dataLoading = false;
      });
    },

話不多說了，來看具體的操作吧

1:在views底下新建一個test文件夾
里面新建一個vue文件和一個json文件

2：使用
mock.json

{
    "msg": "success",
    "code": 1,
    "data": [
        {
            "id": 2,
            "permissionToken": "data_spectaculars_token1",
            "description": "數(shù)據(jù)看板",
            "parentId": 1,
            "checked": true
        },
        {
            "id": 3,
            "permissionToken": "data_spectaculars_stat_token2",
            "description": "統(tǒng)計看板",
            "parentId": 2,
            "checked": true
        },
        {
            "id": 4,
            "permissionToken": "data_spectaculars_health_token2",
            "description": "健康看板",
            "parentId": 2,
            "checked": true
        },
        {
            "id": 1,
            "permissionToken": "system_token0",
            "description": "系統(tǒng)權(quán)限",
            "parentId": 0,
            "checked": false
        },
        {
            "id": 5,
            "permissionToken": "account_management_token1",
            "description": "賬戶管理",
            "parentId": 1,
            "checked": false
        },
        {
            "id": 6,
            "permissionToken": "account_management_user_token2",
            "description": "用戶管理",
            "parentId": 5,
            "checked": false
        },
        {
            "id": 7,
            "permissionToken": "account_management_permission_token2",
            "description": "權(quán)限管理",
            "parentId": 5,
            "checked": false
        },
        {
            "id": 8,
            "permissionToken": "data_management_token1",
            "description": "數(shù)據(jù)管理",
            "parentId": 1,
            "checked": false
        },
        {
            "id": 9,
            "permissionToken": "data_management_organ_token2",
            "description": "部門管理",
            "parentId": 8,
            "checked": false
        },
        {
            "id": 10,
            "permissionToken": "data_management_config_token2",
            "description": "數(shù)據(jù)配置",
            "parentId": 8,
            "checked": false
        },
        {
            "id": 11,
            "permissionToken": "data_management_staff_token2",
            "description": "人員管理",
            "parentId": 8,
            "checked": false
        },
        {
            "id": 12,
            "permissionToken": "data_management_asset_token2",
            "description": "資產(chǎn)管理",
            "parentId": 8,
            "checked": false
        },
        {
            "id": 13,
            "permissionToken": "device_management_token1",
            "description": "設(shè)備管理",
            "parentId": 1,
            "checked": false
        }
    ]
}

3:test.vue實例代碼

<template>
  <div class="ztree">
    <el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check="checkHandler"
    >
    </el-tree>
    <el-button type="primary" @click="createData()">確定</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      setTree: [],
      defaultProps: {
        children: "children",
        label: "description",
      },
      treeData: [],
      organList: [],
      questionForm: {
        //permissionTokens: [],
      },
    };
  },
  watch: {},
  created() {
    //加載樹節(jié)點
    this.getZtreeList();
  },
  methods: {
    //樹文件勾選事件
    checkHandler(...value) {
      let a = value[1].checkedNodes.map((a) => a.description);
      let b = value[1].checkedNodes.map((a) => a.permissionToken);
      console.log(a);
      this.questionForm.description = a;
      this.questionForm.permissionToken = b;
    },

    //獲取樹權(quán)限節(jié)點接口定義
    getZtreeList() {
      this.dataLoading = true;
      import("./mock").then((res) => {
        this.setTree = res.data;
        this.organList = res.data.map((a) => ({
          label: a.description,
          value: a.id,
        }));

        this.getListData();
        this.dataLoading = false;
      });
    },

    //對json的格式的轉(zhuǎn)化
    getListData() {
      let dataArray = [];
      this.setTree.forEach(function (data) {
        let parentId = data.parentId;
        if (parentId === 0) {
          let objTemp = {
            id: data.id,
            description: data.description,
            permissionToken: data.permissionToken,
            parentId: parentId,
          };

          dataArray.push(objTemp);
        }
      });
      this.treeData = this.data2treeDG(this.setTree, dataArray);
    },
    data2treeDG(datas, dataArray) {
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j];
        let childrenArray = [];
        let Id = dataArrayIndex.id;
        for (let i = 0; i < datas.length; i++) {
          let data = datas[i];

          let parentId = data.parentId;
          if (parentId == Id) {
            //判斷是否為兒子節(jié)點
            let objTemp = {
              id: data.id,
              description: data.description,
              permissionToken: data.permissionToken,
              parentId: parentId,
            };
            childrenArray.push(objTemp);
          }
        }
        dataArrayIndex.children = childrenArray;

        //console.log("打印childrenArray", dataArrayIndex.children);
        if (childrenArray.length > 0) {
          //有兒子節(jié)點則遞歸
          this.data2treeDG(datas, childrenArray);
        }
      }
      // console.log("打印處理過的json", dataArray);
      return dataArray;
    },

    //添加角色
    async createData() {
      const params = this.questionForm;
      alert(JSON.stringify(params));
    },
  },
};
</script>

效果：