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>
相关推荐
早起傻一天~G4 分钟前
vue2+element-UI表单封装
前端·vue.js·ui
pixcarp9 分钟前
Nginx实战部署与踩坑总结 附带详细配置教程
服务器·前端·后端·nginx·golang
Live&&learn16 分钟前
Vue项目打包后内联字符串不显示的原因
前端·javascript·vue.js
爱上好庆祝19 分钟前
学习js的第三天
前端·css·人工智能·学习·计算机外设·js
aq553560019 分钟前
Chrome如何重塑Web标准的未来格局
前端·chrome
宁雨桥22 分钟前
深入剖析Vue2与Vue3响应式原理:从Object.defineProperty到Proxy的演进
前端·vue.js
wytraining25 分钟前
SDD规范驱动开发
前端
深海鱼在掘金28 分钟前
Next.js从入门到实战保姆级教程(第十四章):性能优化深度实践
前端·typescript·next.js
tiger从容淡定是人生28 分钟前
Selenium与Playwright:两大Web自动化框架的深入对比
前端·selenium·测试工具·自动化·web测试·playwright·信息化战略
好运的阿财34 分钟前
OpenClaw工具拆解之 web_fetch+image_generate
前端·python·机器学习·ai·ai编程·openclaw·openclaw工具