element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选

当我勾选树状菜单的父级节点的时候，右侧展示对应的子节点。
意思就是只要子节点中包含children属性就不展示，说明不是最终的子节点。
如下图所示。
右侧只展示了最终的子节点而没有展示一级和二级节点。

1、勾选的时候右侧列表会展示勾选的最终的子节点。
2、点击删除列表中某一项，就会对应的取消树状菜单的勾选状态。
3、支持搜索过滤。

<template lang="pug">
	ul.dialog-body-content
      //- 搜索、树状列表
      li
        el-input.mb-20.search-input(
          placeholder="搜索成员"
          prefix-icon="el-icon-search"
          v-model="filterSearchInput"
          clearable
        )
        el-tree(
          ref="tree"
          :data="treeData"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1]"
          :filter-node-method="filterNode"
          :props="defaultProps"
          @check="fnClickNode"
        )
      //- 已选择成员
      li
        p.pb-5.fsz-14.sticky 已选择的成员
        template(v-if="selectedMumberList.length")
          ul.mt-20
            li.selected-mumber.mb-10.pb-5(
              v-for="(m, i) in selectedMumberList"
              :key="i"
            )
              p.user-name
                i.fsz-18.el-icon-user-solid
                span.ml-10 {{m.label}}
              //- 删除列表中的某一项
              i.fsz-18.el-icon-close.remove-icon(
                @click="removeMumber(m,i)"
              )
        template(v-else)
          .no-personal.mt-30 暂无成员
</template>
<script>
export default {
	data() {
		return {
			filterSearchInput: '',
			treeData: [],
			// 树状菜单默认项
	        defaultProps: {
	        	children: 'children',
	        	label: 'label'
	        },
			selectedMumberList: []
		}
	},
	watch: {
	    filterSearchInput (val) {
	      this.$refs.tree.filter(val);
	    }
    },
	methods: {
		// 搜索过滤
	    filterNode (value, data) {
	      if (!value) return true;
	      return data.label.indexOf(value) !== -1;
	    },
	    // 节点点击
	    fnClickNode () {
	      // 获取选中的子节点列表
	      // getCheckedNodes 的第一个参数为false，表示连同父节点一并获取，true只获取子节点
	      this.selectedMumberList = this.$refs.tree.getCheckedNodes(true, false);
	    },
	    // 移除勾选人员
	    removeMumber (nodeObj, index) {
	      this.$confirm('确定删除此成员吗?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	      }).then(() => {
	      	// 删除列表中点击的那一项
	        this.selectedMumberList.splice(index, 1);
	        // 取消对应删除列表的节点的选中状态
	        this.$refs.tree.setChecked(nodeObj.id, false, true);
	        this.$message({
	          type: 'success',
	          message: '删除成功!'
	        });
	      }).catch(() => {});
	    }
	}
}
</script>

另附上：文档截图