element tree组件,修改当前节点label

     <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">
                添加
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => edit(node, data)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
edit(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      this.$prompt("请编辑节点名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator:function(val){
          console.log(val);
          if(val){
            return true;
          }else{
            return '输入内容不能为空';
          }
        }
      })
        .then(({ value }) => {
            children[index].label = value;
        })
        .catch(() => {
          return;
        });
    },

 

posted @ 2021-03-31 15:15  nicknames  阅读(3930)  评论(0)    收藏  举报