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;
        });
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM