el-table中增加校验方法(二)

思路:element-ui组件中是自带from校验的,所以想校验表格可以在其外部封装一个from

javascript 复制代码
<template>
<el-form ref="formRef" :model="formData" :rules="formRules" :inline-message="true">
      <el-table
        :data="formData.mouldData"
        border
        stripe
        highlight-current-row
        :row-class-name="tableRowClassName"
        :cell-style="{ 'text-align': 'center' }"
        @row-click="handleRowClick"
        :header-cell-style="{
          background: '#b7babd',
          color: '#1e1f22',
          height: '35px',
          'text-align': 'center'
        }"
        style="width: 100%;max-height:45vh;overflow-y: auto"
        max-height="600"

      >
        <el-table-column label="序号" label-width="100px" type="index" />
        <el-table-column label="用户名称">
          <template #header> 用户名称</template>
          <template #default="scope">
            <el-form-item
              size="small"
              :prop="'mouldData.[' + scope.$index + '].evaluationProject'"
              :rules="formRules.evaluationProject"
              style="margin-top: 15px"
              v-show="scope.row.show"
            >
              <el-input v-model="scope.row.evaluationProject" size="large" @input="handleInput(scope.row)"/>
            </el-form-item>
            <span v-show="!scope.row.show">{{ scope.row.evaluationProject }}</span>
          </template>
        </el-table-column>
      </el-table>
      </el-form>
</template>
相关推荐
哆啦A梦158824 分钟前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
gogoing32 分钟前
ESLint 配置字段说明
前端·javascript
Lkstar44 分钟前
面试官让我手写 Promise.all / Promise.race / Promise.allSettled,我直接水灵灵地写出来了
javascript·面试
gogoing1 小时前
webpack 的性能优化
前端·javascript
gogoing1 小时前
Node.js 模块查找策略(require 完整流程)
javascript·node.js
gogoing1 小时前
await fetch() 的两阶段设计
前端·javascript
gogoing1 小时前
前端首屏加载优化
前端·javascript
gogoing1 小时前
重排与重绘
前端·javascript
徐小夕2 小时前
100小时,我做了一款AI CAD建模软件,开源!
前端·vue.js·github
之歆3 小时前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript