vue实现element自定义新增、删除table表格的行，和可输入input（可以自行修改成双击表格可编辑）

效果如图：新增表格行，可点编辑再修改表格行内容（也可以自行修改成双击表格可编辑）

 思路：

1.新增表格行(handleAddBtn)：给表格数组(我这里是用tableData数组)push空的对象
2.删除行(handleDeleteBtn)：
①首先要拿到对应的索引，即可以用表格的@selection-change="handleDetailSelectionChange"获取勾选的行；
②然后在删除的方法里判断用户勾选选择行的长度（我这里是用checkedDetail数组存储），长度若为0则表示没有选择，为了增加用户体验感给予提示即可；若长度大于0，遍历checkedDetail与tableData作比较（xh属性）相同的删除即可
3.可编辑行（showUpdate）：拿到对应的索引并令其显示（this.showEdit[index] = true;网上说要用 $ set方法，否则页面状态不更新）
4.取消编辑（cancelUpdate）：拿到对应的索引并令其隐藏（this.showEdit[index] = false;）

 

1、点击新增table表格行

添加点击事件，在handleAddBtn方法中创建表格对象（由于我表格数据太多，就删除了大部分，照样子模仿就行）

<el-button type="success" icon="el-icon-plus" size="mini" @click="handleAddBtn">添加</el-button>

//点击新增更多
handleAddBtn() {
  this.getaddress = "";	//临时存储用户地址
  et obj = {};	//创建空的对象
  obj.username = "";	//用户名称
  obj.mescode = "";	//账号
  obj.address = "";	//地址
  this.tableData.push(obj);	//在tableData表格数组中添加对象
}

2、点击删除行，可多选

添加删除点击事件，handleDeleteBtn方法把对应多选选中的行删除

<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBtn">删除</el-button>

//删除
        handleDeleteBtn() {
            if (this.checkedDetail.length == 0) {
                this.$alert("请先选择要删除的数据", "提示", {
                    confirmButtonText: "确定",
                });
            } else {
                this.$confirm("请是否确认删除该属性?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    callback: (action) => {
                        if (action === "confirm") {
                            let val = this.checkedDetail; //checkedDetail为表格多选选中的数组
                            val.forEach((val, index) => {
                                this.tableData.forEach((v, i) => {
                                    if (val.xh === v.xh) {
                                        this.tableData.splice(i, 1);
                                    }
                                });
                            });
                            this.$message({
                                message: "删除成功，记得保存修改喔！",
                                type: "success",
                            });
                            this.$refs.tb.clearSelection();
                            return;
                        } else {
                            this.$message({
                                message: "已取消删除操作",
                                type: "warning",
                            });
                            return;
                        }
                    },
                });
            }
        }

3.操作部分的编辑、确定、取消功能

这里的行需要拿到对应的index值，所以需要用slot-scope=“{row,$index}”；
showEdit是个空数组，用来控制对应的标签显示及隐藏的；
这里使用this. $set() 方法将对应索引的行改成true或false

<el-table-column header-align="center" align="center" width="100" label="操作">
    <template slot-scope="{row,$index}">	
         <el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)" type="text" size="small">编辑</el-button>
         <el-button v-if="showEdit[$index]" @click="submit($index,row)" type="text" size="small" style="color: #85ce61;">确定</el-button>
         <el-button v-if="showEdit[$index]" @click="cancelUpdate($index)" type="text" size="small" style="color: red;">取消</el-button>
    </template>
</el-table-column>

//点击修改
        showUpdate(index, row) {
            console.log("index");
            this.showEdit[index] = true;	
            this.$set(this.showEdit, index, true); //这里要用$set方法，否则页面状态不更新
        },
        //提交修改
        submit(index, row) {
            console.log("index", index);
            this.tableData[index].address = this.getaddress.adrNAME;
            // this.tableData[index].username = this.getUser.label;
            console.log("tableData===submit", this.tableData);

            //发送请求，隐藏输入框
            this.$message({
                type: "success",
                message: "已缓存，记得点击保存提交修改喔！",
                duration: 888,
                onClose: () => {
                    this.$set(this.showEdit, index, false); //vue添加属性的方法
                },
            });
        },
        //取消修改
        cancelUpdate(index) {
            this.$confirm("取消修改？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$set(this.showEdit, index, false);
                })
                .catch(() => {});
        }

完整代码：

<!-- 可新增/删除table表格页面 -->
<template>
  <div>
    <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAddBtn">添加</el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBtn">删除</el-button>

    <el-table ref="tb" :data="tableData" :header-cell-style="{background:'rgb(113 167 228)',color:'#fff'}" :row-class-name="rowClassName" border style="width: 100%; cursor: pointer;" @selection-change="handleDetailSelectionChange">
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column label="序号" align="center" prop="xh" width="50" />

      <el-table-column prop="mescode" align="center" :required="true" label="账号">
        <template slot-scope="{row,$index}">
          <span v-if="!showEdit[$index]">{{ row.mescode }}</span>
          <el-input v-if="showEdit[$index]" v-model="tableData[row.xh-1].mescode" placeholder="请输入该用户的账号">
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="password" align="center" :required="true" label="密码">
        <template slot-scope="{row,$index}">
          <span v-if="!showEdit[$index]">{{ row.password }}</span>
          <el-input v-if="showEdit[$index]" v-model="tableData[row.xh-1].password" placeholder="请输入该用户的密码">
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" width="100" label="操作">
        <template slot-scope="{row,$index}">
          <el-button v-if="!showEdit[$index]" type="text" size="small" @click="showUpdate($index,row)">编辑</el-button>
          <el-button v-if="showEdit[$index]" type="text" size="small" style="color: #85ce61;" @click="submit($index,row)">确定</el-button>
          <el-button v-if="showEdit[$index]" type="text" size="small" style="color: red;" @click="cancelUpdate($index)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [],
      checkedDetail: [],
      showEdit: [] // 控制显示及隐藏
    }
  },
  methods: {
    // 表格的新增
    rowClassName({ row, rowIndex }) {
      row.xh = rowIndex + 1
    },
    // 单选框选中数据
    handleDetailSelectionChange(selection) {
      this.checkedDetail = selection
    },
    // 点击新增更多
    handleAddBtn() {
      const obj = {}
      obj.mescode = ''
      obj.password = ''
      this.tableData.push(obj)
    },
    // 删除
    handleDeleteBtn() {
      if (this.checkedDetail.length === 0) {
        this.$alert('请先选择要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.$confirm('请是否确认删除该属性?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: (action) => {
            if (action === 'confirm') {
              const val = this.checkedDetail
              val.forEach((val, index) => {
                this.tableData.forEach((v, i) => {
                  if (val.xh === v.xh) {
                    this.tableData.splice(i, 1)
                  }
                })
              })
              this.$message({
                message: '删除成功，记得保存修改喔！',
                type: 'success'
              })
              this.$refs.tb.clearSelection()
              return
            } else {
              this.$message({
                message: '已取消删除操作',
                type: 'warning'
              })
              return
            }
          }
        })
      }
    },
    // 点击修改
    showUpdate(index, row) {
      console.log('index')
      this.showEdit[index] = true
      this.$set(this.showEdit, index, true) // 这里要用$set方法，否则页面状态不更新
    },
    // 取消修改
    cancelUpdate(index) {
      this.$confirm('取消修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$set(this.showEdit, index, false)
        })
        .catch(() => {})
    },
    // 提交修改
    submit(index, row) {
      // 发送请求，隐藏输入框
      this.$message({
        type: 'success',
        message: '已缓存，记得点击保存提交修改喔！',
        duration: 888,
        onClose: () => {
          this.$set(this.showEdit, index, false) // vue添加属性的方法
        }
      })
    }
  }
}
</script>
<style>
</style>