欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-11 16:22:20
结构:
新建任务

结构:

 <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: '上海市普'
        })
    },

 样式我就不粘了,methods中的两个方法,可以自己定义并添加到某个按钮上,下面是我的页面:

编辑的话就双击就好了,字段名和描述信息都可以编辑

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

点击新增就是在表格尾部增加一行自己定义的 

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

 

 

本文地址:https://blog.csdn.net/qq_41579104/article/details/107387524