elementPlus组件之表格编辑并校验功能实现

<template>
  <el-form ref="tableFormRef" :model="table.form" :rules="table.rules" status-icon>
    <el-table :data="table.data" border stripe>
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="min" label="下限值(kwh)">
        <template #default="scope">
          <el-form-item v-if="scope.$index === table.idx" prop="min">
            <el-input v-model.number="table.form.min" placeholder="请输入下限值" />
          </el-form-item>
          <span v-else>{{ scope.row.min }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="max" label="上限值(kwh)">
        <template #default="scope">
          <el-form-item v-if="scope.$index === table.idx" prop="max">
            <el-input v-model.number="table.form.max" placeholder="请输入上限值" />
          </el-form-item>
          <span v-else>{{ scope.row.max }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价(元)">
        <template #default="scope">
          <el-form-item v-if="scope.$index === table.idx" prop="price">
            <el-input v-model.number="table.form.price" placeholder="请输入单价" />
          </el-form-item>
          <span v-else>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <template v-if="scope.$index === table.idx">
            <el-button @click="saveItem(scope.$index)">保存</el-button>
            <el-button @click="cancelItem(scope.$index)">取消</el-button>
          </template>
          <template v-else>
            <el-button @click="editItem(scope.$index, scope.row)">编辑</el-button>
            <el-button @click="deleteItem(scope.$index)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-table-item" @click="addItem">新增</div>
  </el-form>
</template>
<script setup>
// 校验规则最小数
const rangeNumberMin = (rule, value, callback) => {
  console.log(value >= table.form.max, value, table.form.max)
  if (value < 0) {
    callback(new Error('数字不能为负数'))
  } else if (value >= table.form.max) {
    callback(new Error('下限值不能大于或等于上限值'))
  } else {
    callback()
  }
}
// 校验规则最大数
const rangeNumberMax = (rule, value, callback) => {
  if (value < 0) {
    callback(new Error('数字不能为负数'))
  } else if (value <= table.form.min) {
    callback(new Error('上限值不能小于或等于下限值'))
  } else {
    callback()
  }
}
// 表格表单数据
const table = reactive({
  data: [ // 表格数据
    { price: 100, max: 100, min: 0 },
    { price: 100, max: 200, min: 0 },
    { price: 100, max: 100, min: 10 },
    { price: 100, max: 200, min: 30 },
    { price: 100, max: 100, min: 50 }
  ],
  idx: -1, // 编辑第几条数据（-1则为不编辑）
  isAdd: false, // 是否为新增数据，如果为新增，取消时则需要做删除操作
  form: { // 表单数据，单独处理是为了方便取消操作和规则校验
    price: '',
    max: '',
    min: ''
  },
  rules: { // 规则校验
    min: [
      { required: true, message: '请输入下限值', trigger: 'blur' },
      { validator: rangeNumberMin, trigger: 'blur' }
    ],
    max: [
      { required: true, message: '请输入上限值', trigger: 'blur' },
      { validator: rangeNumberMax, trigger: 'blur' }
    ],
    price: [{ required: true, message: '请输入价格限值', trigger: 'blur' }]
  }
})
// 新增
const addItem = () => {
  if (table.idx > -1) {
    return
  }
  table.isAdd = true // 标记，取消后会删除编辑数据
  table.idx = table.data.length // 编辑最新条数
  table.data.push(table.form)
}
// 编辑
const editItem = (idx, val) => {
  if (table.idx > -1) {
    return
  }
  table.isAdd = false // 防止取消后删除编辑数据
  table.idx = idx // 编辑当前
  table.form = { ...val } // 将需要编辑的数据解构赋值给表单，此处是做了深拷贝，如果数据复杂，需要另外做深拷贝处理
}
// 取消
const cancelItem = idx => {
  // 如果是新增状态下，则删除编辑数据
  if (table.isAdd) {
    table.data.splice(idx, 1)
  }
  // 初始化数据
  table.form = {
    price: '',
    max: '',
    min: ''
  }
  table.idx = -1
  table.isAdd = false
}
// 删除
const deleteItem = idx => {
  if (table.idx > -1) {
    return
  }
  table.data.splice(idx, 1)
}
const tableFormRef = ref()
const saveItem = idx => {
  tableFormRef.value.validate(valid => {
    if (valid) {
      // 替换插入数据，如数据解构复杂，请自行做深拷贝操作
      table.data.splice(idx, 1, { ...table.form })
      // 初始化数据
      table.form = {
        price: '',
        max: '',
        min: ''
      }
      table.idx = -1
      table.isAdd = false
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>
<style lang="scss" scoped>
.add-table-item {
  width: 100%;
  height: 49px;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: var(--el-border-color-lighter);
  text-align: center;
  line-height: 49px;
  background-color: var(--el-fill-color-lighter);
  cursor: pointer;
}
</style>