<div> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <div class="tree mt10"> <el-tree :data="date" show-checkbox node-key="moduldCode" ref="tree" :check-strictly="false" :highlight-current="true" :check-on-click-node="true" :accordion="true" :default-checked-keys="[checkedkey]" :default-expanded-keys="checkedkey" :filter-node-method="filterNode" :props="defaultProps" :default-expand-all="true" @check-change="parentModules" @node-click="clickTree" ></el-tree> </div> </div>
<script> // import { Req_getToken } from "@/api/user"; export default { name: "PersonManage", components: {}, data() { return { filterText: "", date: [ { moduldCode: 1, moduleName: "一级 2", disabled: true, child: [ { moduldCode: 3, moduleName: "二级 2-1", disabled: true, child: [ { moduldCode: 4, moduleName: "三级 3-1-1ddddddddddddddddddddddddddddddddddddddd" }, { moduldCode: 5, moduleName: "三级 3-1-2" } ] }, { moduldCode: 2, moduleName: "二级 2-2", disabled: true, child: [ { moduldCode: 6, moduleName: "三级 3-2-1" }, { moduldCode: 7, moduleName: "三级 3-2-2" } ] } ] } ], checkedkey: [], defaultProps: { children: "child", label: "moduleName", id: "moduldCode" //可要可不要 }, // 取uniqueValue值的时候,列:uniqueValue[0]否则会是一个数组 uniqueValue: "", //最后拿到的唯一选择的moduldCode值,相当于id uniqueValueObj: "", //选中对象 uniqueValueParent: "" //父节点 }; }, created() {}, mounted() {}, watch: { filterText(val) { this.$refs.tree.filter(val); } }, methods: { filterNode(value, data) { if (!value) return true; return data.moduleName.indexOf(value) !== -1; }, //节点选择状态发生改变时 parentModules(data, checkbox, node) { if (checkbox) { // 后端返回的node-key不是id,是moduldCode this.$refs.tree.setCheckedKeys([data.moduldCode]); this.uniqueValue = this.$refs.tree.getCheckedKeys(); this.uniqueValueObj = data; // console.log(data); // console.log(checkbox); // console.log( this.uniqueValue); // console.log(this.$refs.tree.getNodePath()); // console.log(this.$refs.tree.getCurrentNode()); // console.log(this.$refs.tree.getCheckedNodes()); } else { this.uniqueValue = this.$refs.tree.getCheckedKeys(); if (this.uniqueValue.length == 0) { this.uniqueValue = ""; } } }, clickTree(v, e) { // console.log(v.id); console.log(e); console.log(e.parent.data); if (e.checked) { this.uniqueValueParent = e.parent.data; } } } }; </script>
<style lang="scss" scoped> .select-person-inner { .inner-tem { float: left; } .inner-tem.inner-lf { width: 55%; padding-right: 20px; border-right: 1px solid #dcdfe6; .lf-contnent { border: 1px solid #dcdfe6; border-radius: 2px; .lf-ct-header { border-bottom: 1px solid #dcdfe6; .lf-ct-header-item { width: 50%; height: 35px; float: left; line-height: 35px; box-sizing: border-box; } .lf-ct-header-item.item-lf { border-right: 1px solid #dcdfe6; } } .lf-ct-tree { padding: 10px; } } } .inner-tem.inner-rt { width: 45%; padding-left: 20px; } } .el-tree { min-width: 100%; display: inline-block; } .tree { // overflow-y: auto; // overflow-x: scroll; overflow: auto; max-height: 200px; /*200px;*/ // border: 1px solid blue; } </style>