el-table 插入单选并进行校验

javascript 复制代码
<template>
  <div>
    <el-form :model="list" ref="ruleForm">
      <el-table :data="list.tableData" style="width: 100%">
        <el-table-column prop="time" label="日期" width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.time'" :rules="rules.time">
              <el-input v-model="scope.row.time" maxlength="200" oninput="if(value.length > 4) value=value.slice(0, 4)" placeholder="请输入">
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.time">
              <el-input v-model="scope.row.name" maxlength="200" oninput="if(value.length > 4) value=value.slice(0, 4)" placeholder="请输入">
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: {
        tableData: [
          {
            time: '2016-05-02',
            name: '王小虎'
          },
          {
            time: '2016-05-03',
            name: '王小虎3'
          }
        ]
      },
      rules: {
        time: [
          { required: true, message: '请输入', trigger: 'blur' },
        ]
      }
    }
  }
}
</script>

<style>
</style>
相关推荐
GISer_Jing3 分钟前
大语言模型Agent入门指南
前端·数据库·人工智能
多仔ヾ10 分钟前
Vue.js 前端开发实战之 10-网络请求和 UI 组件库
vue.js
运筹vivo@14 分钟前
BUUCTF: [极客大挑战 2019]Upload
前端·web安全·php·ctf
qq_124987075317 分钟前
基于Spring Boot的长春美食推荐管理系统的设计与实现(源码+论文+部署+安装)
java·前端·spring boot·后端·毕业设计·美食·计算机毕业设计
运筹vivo@19 分钟前
攻防世界: easyupload
前端·web安全·php·ctf
UI设计兰亭妙微42 分钟前
兰亭妙微:以HTML前端、UI/交互/图标设计赋能数字孪生与大屏设计新标杆
前端·ui·用户体验设计
jarreyer1 小时前
【AI编程】claudecode插件配置记录和trae软件相关配置
前端·chrome·ai编程
奔跑的web.1 小时前
TypeScript 类型断言
前端·javascript·typescript
ヤ鬧鬧o.1 小时前
HTML多倒计时管理
前端·javascript·css·html5
知兀1 小时前
【uniapp/vue3+ts/js】eslint9+prettier+husky+lint-staged
前端·javascript·uni-app