el-tree新增节点不能重名

使用el-treefilter-node-method属性及filter方法判断新增节点名称是否重名

<el-tree
 :data="data"
 node-key="id"
 default-expand-all
 :expand-on-click-node="false"
 :filter-node-method="filterNode"
 ref="tree"
>
  <span class="custom-tree-node" slot-scope="{ node, data }">
   <span v-if="!data.append">{{ node.label }}</span>
    <span v-else >
      <el-input
        type="text"
        size="mini"
        placeholder="请输入名称"
        v-model="data.label"
        @change="handleChange(data)"
      />
    </span>
    <span>
      <el-button type="text" size="mini" @click="() => append(data)"> Append </el-button>
    </span>
  </span>
</el-tree>
<script>
  let id = 1000;
  export default {
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
        data: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      append(data) {
        const newChild = { id: id++, label: '', children: [], append: true };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
	  filterNode(filter, data) {
	    let { isFilter, value } = filter;
	    if (isFilter) {
	      // 过滤节点
	      if (!value) return true;
	      return data.label.indexOf(value) !== -1;
	    } 
	    // 不过滤节点
	    if (value.label && data.label === value.label && data.id !== value.id) {
	       value.label = ''; // 重复清空输入框的值
	       this.$message.error('名称重复');
	     }	
	     return true;
	  },
	  // 仅在输入框失去焦点或用户按下回车时触发
	  handleChange(data) {
	    this.tree.filter({ isFilter: false, value: data });
	  },
    }
  };
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值