Vue-easy-tree封装及使用-编程知识

1.使用及安装

下载依赖
npm install @wchbrad/vue-easy-tree引入俩种方案
1.在main.js中引入
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
Vue.use(VueEasyTree)2.当前页面引入
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"

2.封装vue-easy-tree

<template><div class='select-tree-container' ref="selectMutiple"><el-inputautocomplete="off":placeholder="loading?'正在加载数据···':placeholder":readonly="true":disabled="loading":value="checkedTreeData"><i v-show="loading" slot="suffix" class="el-input__icon el-icon-loading"></i></el-input><transition name="sub-comments"><divclass="scroll-container"v-show="selectTreeFlag"><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><VueEasyTree:data="treeData"show-checkboxheight="500px":node-key="treeProps.value":props="treeProps":default-checked-keys="newArr"ref="selectMutipleTree"@check="handleCheck":filter-node-method="filterNode":check-strictly="checkStrictly"></VueEasyTree></div></transition></div>
</template><script>
import VueEasyTree from "@wchbrad/vue-easy-tree";
// 样式文件，可以根据需要自定义样式或主题
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
import {debounce} from '@/shared/debounceAndtThrottle.js'
export default {name: 'SelectMutipleTree',components: {VueEasyTree},props: {treeData: {type: Array,required: true,default:[],},treeProps: {type: Object,default: function () {return {value: 'id',label: 'orgName',checkStrictly: true}}},checkedTreeData: {type: String,required: true},placeholder: {type: String,default: '请输入'},checkStrictly: {type: Boolean,default: false},loading: {type: Boolean,default: true},defaultCheckedKeys:{type: Array,default:() => {return []},}},data () {return {selectTreeFlag: false,filterText: '',filterText_:null,newArr:[]}},watch: {checkedTreeData: function (newValue) {if (!newValue) {this.$nextTick(() => {this.$refs.selectMutipleTree.setCheckedKeys([])})}},filterText(val) {this.filterText_(val)},treeData(val){var num = 0this.chuli(val,num)},defaultCheckedKeys(val){if(val.length == 0) {this.newArr =[]}else{this.chuliCheckedKeys(this.treeData, val)}}},methods: {chuliCheckedKeys(list, val){list.forEach(item => {val.forEach(i => {if(item[this.treeProps.value].split('-')[0] === i){i= item[this.treeProps.value]this.newArr.push(i)}})if(item[this.treeProps.children]){this.chuliCheckedKeys(item[this.treeProps.children], val)}})},chuli(list,num){list.forEach(i=>{num++i[this.treeProps.value] = i[this.treeProps.value] + "-" + num;if(i[this.treeProps.children]){this.chuli(i[this.treeProps.children],num)}})},handleCheck (checkedNodes, checkedKeys) {checkedKeys.checkedNodes.forEach((f) => {f[this.treeProps.value] =  f[this.treeProps.value].split('-')[0]});this.$emit('handleCheckData', checkedKeys.checkedNodes)},filterNode(value, data) {if (!value) return true;return data[this.treeProps.label].includes(value);}},created () {},mounted () {if (!this.checkedTreeData) {this.$nextTick(() => {this.$refs.selectMutipleTree.setCheckedKeys([])})}this.$refs.selectMutiple && this.$refs.selectMutiple.addEventListener('click', (event) => {const ev = event || window.eventif (ev.stopPropagation) {ev.stopPropagation()} else {ev.cancelable = true}this.selectTreeFlag =  !this.loading && true})this.$root.$el.addEventListener('click', (event) => {this.selectTreeFlag = false})this.filterText_ = debounce((val)=>this.$refs.selectMutipleTree.filter(val), 1000)},destroyed () {}
}
</script>
<style lang="scss" scoped>
.scroll-container {max-height: 600px;overflow-y: auto;position: absolute;z-index: 10;width: 100%;border: 1px solid #eeeeee;border-top: none;background: #ffffff;::v-deep {.el-scrollbar__wrap {overflow-x: hidden;}}
}
.sub-comments-leave-active,.sub-comments-enter-active {transition: max-height 0.1s linear;
}
.sub-comments-enter,.sub-comments-leave-to {max-height:0 ;opacity: 0;
}
.sub-comments-enter-to,.sub-comments-leave {max-height: 136px ;
}
</style>

3.具体页面该如何使用

<select-mutiple-tree  size="mini" style="display: inline-block" :treeData="organizationTree" :treeProps="releaseTreeProps" :loading="treeLoading" :checkedTreeData="addCaseForm.copyToUserListName" 
placeholder="请选择"  @handleCheckData="handleCheck" :checkStrictly="releaseTreeProps.checkStrictly">
</select-mutiple-tree>1.data中定义organizationTree: [],treeLoading: true, //控制人员树加载状态releaseTreeProps: {value: "nodeIdAndType",label: "nodeName",children: "organizationTreeUserSingeNodeList",checkStrictly: false,},addCaseForm: {copyToUserListName:'',copyToUserList:[], //抄送人}
2.引入及注册import SelectMutipleTree from "@/components/selectMutipleTree";components:{SelectMutipleTree }
3.接口中写接口名字().then((response) => {const { data, success } = response;if (success) {this.organizationTree = data;this.treeLoading = false;} else {this.organizationTree = [];this.treeLoading = false;}}).catch((error) => {this.organizationTree = [];this.treeLoading = false;});
4.方法handleCheck(checkedData) {if (checkedData.length > 0) {// 集合var namesArr = [];var idsArr = [];var userName = [];checkedData.forEach((f) => {if (f.nodeType !== 0) {namesArr.push(f.nodeName);idsArr.push(f.nodeId)userName.push({id: f.nodeId,name: f.nodeName,});}});this.addCaseForm.copyToUserListName = namesArr.join(";");this.addCaseForm.copyToUserList = idsArr;} else {this.addCaseForm.copyToUserListName = '';this.addCaseForm.copyToUserList = [];}},

5.具体返回的后台格式