vue3 + element-plus 表格行内编辑,如何实现表单校验?

问题描述: 当使用table实现行内编辑时,往往需要对必填项增加校验以及错误高度, 预期实现效果如下:

实现思路:

使用el-form表单自身的校验功能:通过el-from绑定对应表格行的prop, 实现校验

页面模版结构如下:

html 复制代码
<el-form ref="formRef" :model="tableData" :label-width="0" :rules="rules">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="type" label="类型" width="180">
        <template #default="{ row, index }">
          <el-form-item v-if="index > -1" :prop="`${index}.type`" :rules="rules.type">
            <el-select-v2 v-model="row.type" :options="changeEnumToOptions(IOuterType)" placeholder="请选择类型" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180">
        <template #default="{ row, index }">
          <el-form-item v-if="index > -1" :prop="`${index}.type`" :rules="rules.name">
            <el-input v-model="row.name" placeholder="请输入名称" />
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
</el-form>

注意的点:

  • el-form(model属性)绑定的值,必须和el-table(data属性)的值一致。
  • el-from-item 的prop绑定值的路径,必须正确:`${index}.columnName`, index: 对应表格的行标,columnName为当前表格列对应的prop值。
  • rules: 绑定位置必须绑定到el-form-item上, 绑定到el-form上不生效。
相关推荐
Asort27 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜27 分钟前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安30 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
艾小码33 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了138 分钟前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码38 分钟前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰1 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba1 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端1 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰1 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js