vue3 el-table组件 动态新增、编辑、删除、取消

1.需求如图

2.代码实现

   <div>
        <el-button type="primary" @click="addContactPerson">新增</el-button>
        <el-table :data="form.contactList" stripe style="width: 100%">
          <el-table-column prop="name" label="姓名">
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.name"
                type="text"
                placeholder="请填写"
              />
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="post" label="职位">
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.post"
                type="text"
                placeholder="请填写"
              />
              <span v-else>{{ scope.row.post }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话">
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.phone"
                type="text"
                placeholder="请填写"
              />
              <span v-else>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱">
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.email"
                type="text"
                placeholder="请填写"
              />
              <span v-else>{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.remark"
                :rows="2"
                type="textarea"
                placeholder="请填写"
              />
              <span v-else>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <div v-if="scope.row.isEdit">
                <el-button type="primary" @click="handleRowConfirm(scope.row)">确定</el-button>
                <el-button type="danger" @click="handleRowCancel">取消</el-button>
              </div>
              <div v-else>
                <el-button type="primary" @click="handleRowEdit(scope.row)"> 编辑</el-button>
                <el-button type="danger" @click="handleRowDelete(scope.$index)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

// 新增联络人
const addContactPerson = () => {
  form.value.contactList.push({
    name: '',
    post: '',
    phone: '',
    email: '',
    remark: '',
    isEdit: true // 当这个值为true时表示可以编辑
  })
}

// 联络人-编辑
const handleRowEdit = (row) => {
// import { set } from 'lodash-es'
  set(row, 'isEdit', true)
}

// 联络人-删除
const handleRowDelete = (index: number) => {
  form.value.contactList.splice(index, 1)
}

// 联络人-取消
const handleRowCancel = () => {
  form.value.contactList = [
    {
      userName: '',
      postName: '',
      mobile: '',
      email: '',
      remarks: '',
      isEdit: true
    }
  ]
}

3.注意vue3 slot的使用 需要使用template标签 #default="scope" 这样才能取到scope的值。