elementPlus组件之表格编辑并校验

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰

📝 专栏：常用组件库与实用工具 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦💕

功能描述

在表格中可以进行单条数据的新增、编辑、删除操作，并能对数据进行校验。具体如下图

功能解析

表格和表单切换，表单嵌套表格，通过v-if判断当前行的数据是否切换为表单组件。
表格编辑定位，通过自带的scope.$index做定位具体是哪条数据做编辑操作，并将该条数据解构赋值给form
取消后数据还原，因为form数据是解构后的，直接取消编辑状态即可。如果是新增状态下的取消，则需要删除最后一条数据。
新增数据，初始化form数据，并push到表格数据

功能实现

javascript 复制代码

<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>

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易 ，如果能帮助到大家,希望大家点点收藏+关注~💕

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建

💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战

elementPlus组件之表格编辑并校验

​功能描述

功能解析

功能实现

功能描述