当我勾选树状菜单的父级节点的时候,右侧展示对应的子节点。
意思就是只要子节点中包含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>

另附上:文档截图

在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐