在实现我的项目性能时， 大多都是左侧是树形构造， 选中的后果应用 表格或者列表的模式展现， 这两个实现起来比拟容易

明天给大家介绍下， 选中的内容， 即右侧也应用树形构造展现

场景: 左侧带过滤关键词&checkbox 多选框的树， 右侧是选中的后果数&反对删除

代码： 左侧树 和 右侧树都应用的是同一个数据源

//  左侧树<el-input  :placeholder="请输出关键词过滤"  v-model="filterText"></el-input><el-tree  :data="mediaPosList"  // 展现的数据  node-key="id"         //每个节点的惟一标识  :props="defaultMediaProps"  // 数据结构的配置项  show-checkbox              // 显示勾选框  check-on-click-node        //点节点名称时抉择勾选  :filter-node-method="filterNodePosLeftTree"   //筛选过滤办法 返回true：显示 false：不显示  :default-checked-keys="selectedPositionIds"  //默认勾选节点key 值列表  ref="mediaPosLeftTree"></el-tree>// 右侧树<el-tree  :data="mediaPosList"  node-key="id"  :props="defaultMediaProps"  :filter-node-method="filterNodePosRightTree"  ref="mediaPosRightTree">    //自定义节点显示  <template slot-scope="{node, data}">    <span>      <el-button       v-if="!data.position"      type="text"       icon="el-icon-close"      @click="removeOneMedia(data.id)"      style="margin-right:10px;"      ></el-button>      <label>{{node.data.name}}</label>           </span>  </template></el-tree>
data(){   return {      filterText: "",      selectedPositionIds: [],      defaultMediaProps:{        children: 'position',        label: 'name'      },  }}//给过滤的filterText 减少监听， 每次变更都会执行树的 filter-node-method 办法watch: {  filterText(val) {    this.$refs.mediaPosLeftTree.filter(val);  }}method: {   init(){     fetch.get('/media_pos').then(res => {        this.mediaPosList = res.data      })     this.$nextTick(() => {        // 期待mediaPosList更新到tree dom data上之后，再执行过滤        this.$refs.mediaPosRightTree.filter(this.selectedPositionIds)      });     },   //左侧树过滤办法   filterNodePosLeftTree(value, data) { //过滤的是filterText  value 值， 即找节点name 蕴含value 的      if (!value) return true      return data.name.indexOf(value) !== -1    },    //右侧树  过滤办法    filterNodePosRightTree(value, data) {      if (!value) return true      return value.includes(data.id)    },        //当勾选完左侧树， 确认抉择时，增加按钮函数， 再次执行右侧树的filter 办法    addMedia(){      //getCheckedKeys 获取选中的节点key,  true:只有叶子节点 ,默认false      let checkedKeys = 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)     },}

后果图：