Vue Element + vue-treeselect 樹形選擇列表

Vue-Treeselect 中文網  

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


npm 安裝 vue-treeselect

npm install --save @riophae/vue-treeselect

【注意：vue-treeselect 好像不支持 :props=""】

1、/src/views/demo/vue-tree-select.vue

<template>
  <div class="app-container">
    <treeselect
      v-model="value"
      :multiple="false"
      placeholder="Select your favourite(s)..."
      :options="list"
      :default-expand-level="1"
      no-options-text="暫無數據"
      @select="treeOnSelect"
    />
  </div>
</template>

<script>
import { getTreeSelects } from "@/api/tree";
import { jsonTree } from "@/utils/tree";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      // value: [9],     // 設置選中的值
      // value: ['b'], // 設置選中的值
      list: [],
      listQuery: {
        resource_code: 1,
        page: 1,
        per_page: 20
      },
      options: [
        {
          id: "a",
          label: "a",
          children: [
            { id: "aa", label: "aa" },
            { id: "ab", label: "ab" }
          ]
        },
        { id: "b", label: "b" },
        { id: "c", label: "c" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      getTreeSelects(this.listQuery)
        .then(res => {
          this.list = jsonTree(res.data.items, {
            id: "id",
            pid: "pid",
            children: "children"
          });
          console.log(JSON.stringify(this.list));
          console.log(typeof this.list);
          console.log(this.list.length);
          if (this.list !== undefined && this.list.length > 0) {
            this.value = [];
            this.value.push(res.data.items[6].id);
          }
        })
        .catch(err => {
          console.error(err);
          console.log("修改出錯了");
        });
    },
    treeOnSelect(val) {
      // treeselect 選擇事件
      console.log(val.id)
    }
  }
};
</script>

2、/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;
}

3、/src/api/tree.js

import request from '@/utils/request'

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

4、服務端 API 接口返回 json 數據
{
  "data": {
    "items": [
      { "id": 1,"label": "超級管理員","pid": 0 },
      { "id": 2,"label": "管理員" ,"pid": 0 },
      { "id": 3,"label": "普通用戶","pid": 0 },
      { "id": 4,"label": "鑽石","pid": 0 },
      { "id": 5,"label": "金牌","pid": 0 },
      { "id": 6,"label": "銀牌","pid": 0 }
    ],
    "total": 6,
    "page_count": 1
  },
  "code": "200",
  "msg": null
}
*
*
*
*