|
@@ -0,0 +1,109 @@
|
|
|
+<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>
|
|
|
+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: ["0-0-0", "0-0-1"],
|
|
|
+ autoExpandParent: true,
|
|
|
+ checkedKeys: ["0-0-0"],
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.treeList {
|
|
|
+ width: 240px;
|
|
|
+ .tree-body {
|
|
|
+ height: 420px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|