Vue Element Tree 樹形控件

Element Tree 樹形控件   

本示例以 Vue Element Admin 項目爲基礎，介紹 Element Tree 樹形控件

1、/src/views/tree.vue

<template>
  <div class="app-container">
    <el-button @click="getCheckedNodes">通過 node 獲取</el-button>
    <el-button @click="getCheckedKeys">通過 key 獲取</el-button>
    <el-button @click="setCheckedNodes">通過 node 設置</el-button>
    <el-button @click="setCheckedKeys">通過 key 設置</el-button>
    <el-button @click="resetChecked">清空</el-button>

    <el-tree
      ref="tree"
      :data="list"
      show-checkbox
      node-key="menu_code"
      highlight-current
      :default-expanded-keys="[1,2,3]"
      :default-checked-keys="[5]"
      :filter-node-method="filterNode"
      :props="defaultProps"
      @check-change="handleCheckChange"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getTreeMenus } from "@/api/tree";
import { jsonTree } from "@/utils/tree";

export default {
  data() {
    return {
      list: [],
      defaultProps: {
        id: "menu_code",
        label: "menu_name",
        children: "children"
      },
      listQuery: {
        resource_code: 1,
        page: 1,
        per_page: 20
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      getTreeMenus(this.listQuery)
        .then(res => {
          this.list = jsonTree(res.data.items, {
            id: "menu_code",
            pid: "parent_code",
            children: "children"
          });
        })
        .catch(err => {
          console.error(err);
          console.log("修改出錯了");
        });
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二級 2-1"
        },
        {
          id: 9,
          label: "三級 1-1-1"
        }
      ]);
    },
    setCheckedKeys() {
      var arr = ['menu68','menu66','menu65'];
      this.$refs.tree.setCheckedKeys(arr);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
    // renderContent(h, { node, data, store }) {},
  }
};
</script>

2、/src/api/tree.js

import request from '@/utils/request'

export function getTreeMenus(query) {
  return request({
    url: '/v1/menus',
    method: 'get',
    params: query
  })
}

3、/src/utils/tree.js

export function jsonTree(data, config) {
    var id = config.id || "id",
        pid = config.pid || "pid",
        children = config.children || "children";
    var idMap = [],
        newIdMap = [],
        jsonTree = [];
    data.forEach(function (v) {
        idMap[v[id]] = v;
    });
    data.forEach(function (v) {
        var parent = idMap[v[pid]];
        delete v.parent;
        if (parent) {
            !parent[children] && (parent[children] = []);
            parent[children].push(v);
        } else {
            jsonTree.push(v);
        }
    });
    return jsonTree;
}

4、服務端 API 接口返回 json 數據

{
  "data": {
    "items": [
      { "menu_code": 1,"menu_name": "一級菜單 1","parent_code": 0 },
      { "menu_code": 2,"menu_name": "一級菜單 2","parent_code": 0 },
      { "menu_code": 3,"menu_name": "一級菜單 3","parent_code": 0 },
      { "menu_code": 4,"menu_name": "二級菜單 1-1","parent_code": 1 },
      { "menu_code": 5,"menu_name": "二級菜單 2-1","parent_code": 2 },
      { "menu_code": 6,"menu_name": "二級菜單 3-1","parent_code": 3 }
    ],
    "total": 6,
    "page_count": 1
  },
  "code": "200",
  "msg": null
}

*
*
*