123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <template>
- <div class="treeList">
- <div class="tree-body">
- <a-tree
- v-model="checkedKeys"
- checkable
- :expanded-keys="expandedKeys"
- :auto-expand-parent="autoExpandParent"
- :selected-keys="selectedKeys"
- :tree-data="treeData"
- @expand="onExpand"
- @select="onSelect"
- />
- </div>
- <div class="btn-list">
- <a-button type="link">恢复默认</a-button>
- <a-button>取消</a-button>
- <a-button type="primary">按钮</a-button>
- </div>
- </div>
- </template>
- <script>
- import { queryByGroup } from "@/api/editer.js";
- const treeData = [
- {
- title: "0-0",
- key: "0-0",
- children: [
- {
- title: "0-0-0",
- key: "0-0-0",
- children: [
- { title: "0-0-0-0", key: "0-0-0-0" },
- { title: "0-0-0-1", key: "0-0-0-1" },
- { title: "0-0-0-2", key: "0-0-0-2" }
- ]
- },
- {
- title: "0-0-1",
- key: "0-0-1",
- children: [
- { title: "0-0-1-0", key: "0-0-1-0" },
- { title: "0-0-1-1", key: "0-0-1-1" },
- { title: "0-0-1-2", key: "0-0-1-2" }
- ]
- },
- {
- title: "0-0-2",
- key: "0-0-2"
- }
- ]
- },
- {
- title: "0-1",
- key: "0-1",
- children: [
- { title: "0-1-0-0", key: "0-1-0-0" },
- { title: "0-1-0-1", key: "0-1-0-1" },
- { title: "0-1-0-2", key: "0-1-0-2" }
- ]
- },
- {
- title: "0-2",
- key: "0-2"
- }
- ];
- export default {
- data() {
- return {
- expandedKeys: ["", ""],
- autoExpandParent: true,
- checkedKeys: [""],
- selectedKeys: [],
- treeData
- };
- },
- watch: {
- checkedKeys(val) {
- console.log("onCheck", val);
- }
- },
- methods: {
- onExpand(expandedKeys) {
- console.log("onExpand", expandedKeys);
- // if not set autoExpandParent to false, if children expanded, parent can not collapse.
- // or, you can remove all expanded children keys.
- this.expandedKeys = expandedKeys;
- this.autoExpandParent = false;
- },
- onCheck(checkedKeys) {
- console.log("onCheck", checkedKeys);
- this.checkedKeys = checkedKeys;
- },
- onSelect(selectedKeys, info) {
- console.log("onSelect", info);
- this.selectedKeys = selectedKeys;
- },
- queryByGroup() {
- queryByGroup().then(res => {
- this.treeData = this.mapTree(res.Content);
- });
- },
- mapTree(tree) {
- const newTree = [];
- tree.forEach(item => {
- if (item.Category && item.Category.length) {
- const children = this.mapTree(item.Category);
- newTree.push({
- title: item.Name,
- key: item.Id,
- children
- });
- } else {
- newTree.push({
- title: item.Name,
- key: item.Id,
- children: []
- });
- }
- });
- return newTree;
- }
- },
- created() {
- this.queryByGroup();
- }
- };
- </script>
- <style lang="less">
- .treeList {
- width: 240px;
- .tree-body {
- height: 420px;
- overflow-y: auto;
- }
- }
- </style>
|