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上不生效。
相关推荐
博客zhu虎康22 分钟前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海35 分钟前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
老华带你飞3 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
伍哥的传说3 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达3 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing3 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy3 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码3 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
Pu_Nine_94 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5