Vue3+Elementplus 实现表格编辑和表单验证

上班写的文章，只能这样了

<template>
  <div>
      <el-form :model="info" ref="forms">
        <el-table
          ref="multipleTableRef"
          :data="info.data"
          style="width: 100%"
          @row-click="rowClickHandle"
          border
        >
          <el-table-column align="center" property="name" label="*姓名">
            <template #default="scope">
              <template v-if="isEdit && currentRow == scope.row.id">
                <el-form-item :prop="'data.' + scope.$index + '.name'" :rules="formRules.name">
                  <el-input placeholder="请输入姓名" v-model="info.data[scope.$index].name" />
                </el-form-item>
              </template>
              <template v-else>
                <div>
                  {{ scope.row.name }}
                </div>
              </template>
            </template>
          </el-table-column>
                  </el-table>
      </el-form>
  </div>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
// 信息
let info: any = reactive({
  data: [
    {
      id: 0,
      name: '小刘',
      role: '0',
      sex: '1',
      card_type: '2',
      card_id: '12345678912345678',
      phone: '12345678912',
      validity: ['2023-11-23', '2023-12-23'],
      remark: '备注'
    }
  ]
})

// 校验规则
const formRules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  role: [{ required: true, message: '请选择', trigger: 'blur' }]
})

// 是否可编辑
const isEdit = ref(false)
// 当前编辑的 行，我用id去判断是同一行
const currentRow = ref(0)

// 点击编辑某一行
const rowClickHandle = (row) => {
  isEdit.value = true
  currentRow.value = row.id
}
// 等你编辑完成后，可以给个确认按钮去完成编辑
// 然后把 isEdit.value = false 就可以了
const forms = ref<FormInstance>()
// 点击外围进行确认编辑完成
const finishEdit = () => {
  if (!forms) return
  forms.value?.validate((valid) => {
    if (valid) {
      console.log('submit!')
      isEdit.value = false
    } else {
      console.log('error submit!')
      return false
    }
  })
}

有问题再说把。。。