在实现项目功能时，大多在左侧有树状结构，选择的结果以表格或列表的形式显示。这两个更容易实现。今天给大家介绍一下。选中的内容，即右边也使用了树形结构Shape结构展示场景：左边是过滤关键字&checkbox的树，右边是选中结果的个数&支持删除代码：左边的树和右树使用相同的数据源//左树//右树//自定义节点展示data(){return{filterText:"",selectedPositionIds:[],defaultMediaProps:{children:'position',label:'name'},}}//给过滤后的filterText添加监听，每次改变都会执行watch的filter-node-method方法watch树：{filterText(val){this.$refs.mediaPosLeftTree.filter(val);}}方法：{init(){fetch.get('/media_pos').then(res=>{this.mediaPosList=res.data})this.$nextTick(()=>{//等待mediaPosList在treedom数据上更新，然后执行过滤this.$refs.mediaPosRightTree.filter(this.selectedPositionIds)});},//左树过滤方法filterNodePosLeftTree(value,data){//Filter为filterText值value，即查找包含value的节点名if(!value)returntruereturndata.name.indexOf(value)!==-1},//右侧树过滤方法filterNodePosRightTree(value,data){if(!value)returntruereturnvalue.includes(data.id)},//当左侧树被选中并确认选择时，添加一个按钮函数并执行右侧再次TreefiltermethodaddMedia(){//getCheckedKeys获取选中节点key，true：只要是叶子节点，默认falseletcheckedKeys=this.$refs.mediaPosLeftTree.getCheckedKeys(true)if(checkedKeys.length===0){this.$message.warning({message:"aaa"),showClose:true})return}this.selectedPositionIds=checkedKeys//对于右边树上的filter，传递的参数会被传递以filter-node-method作为第一个参数this.$refs.mediaPosRightTree.filter(checkedKeys)},}结果图：
