vue 自定义增加编辑删除表格

<!-- 可新增/删除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>