elementUI表格实现可编辑和增加行功能–直接复制即可

飞熊 • 2023年7月14日下午4:41 • 前端开发 • 阅读 400

结构：

 <div class="twoTable fuceng">
        <div class="h_top">
          <span>新建任务</span>
          <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete">
        </div> 
        <div class="h_center">
            <div class="task_2">
                <div class="selectInfo inputBorder" >
                    <input v-model="keyword2" type="text" placeholder="请输入你想搜索的描述信息">
                    <img src="../../../../static/img/select1.png" alt="">
                </div>
            </div>

            <div class="task_2_table task_3_btn">
              <el-table
                :data="tableData"
                 height="200"
                @cell-dblclick="tableDbEdit"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="字段名">
                
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="描述信息"
                  >
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" plain>删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            
        </div> 
        <div class="h_foot">
          <span class="btn"  @click="add_twoTableDelete">新增</span>
          <span class="btn"  @click="keep_twoTableDelete">暂存</span>
        </div>
    </div>

在data中定义tableData:

tableData: [{
          date: '1',
          name: '王小虎',
          address: '上海市普'
        },{
          date: '1',
          name: '王小虎',
          address: '上海市普'
        }],

在methods中定义方法：

//编辑表格
    tableDbEdit(row, column, cell, event) {
          console.log(row, column, cell, event);
          if (column.label != "操作") {//哪些字段不可编辑，可以在if里面做限制，可编辑的字段往下执行
            event.target.innerHTML = "";
            //双击添加一个input框
            let cellInput = document.createElement("input");
            cellInput.value = "";
            //设置input框的类型，宽，padding，边框，圆角等都可以自己设置
            cellInput.setAttribute("type", "text");
            cellInput.style.width = "80%";
            cellInput.style.padding = "0px"
            cellInput.style.border = "1px solid #288EFE";
            cellInput.style.borderRadius = "3px";
            cell.appendChild(cellInput);
            //当鼠标失去焦点时，判断输入是否为空，为空的话可以删除input
            cellInput.onblur = function() {
              if(cellInput.value==""&&column.label=="字段名"){
                message_w("字段名不能为空")
                cellInput.style.border = "1px solid #FD1B1E";
              }else{
                cell.removeChild(cellInput);
                event.target.innerHTML = cellInput.value;
              }
            };
        }
    },
    //新增表格
    add_twoTableDelete(){
      this.tableData.push({
          date: 'now',
          name: '新增的',
          address: '上海市普'
        })
    },