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>
相关推荐
程序媛_MISS_zhang_01102 分钟前
浏览器开发者工具(尤其是 Vue Devtools 扩展)和 Vuex 的的订阅模式冲突
前端·javascript·vue.js
fruge4 分钟前
Vue3.4 Effect 作用域 API 与 React Server Components 实战解析
前端·vue.js·react.js
神秘的猪头17 分钟前
🌐 CSS 选择器详解:从基础到实战
前端·javascript
远山枫谷19 分钟前
CSS选择器优先级计算你真的会吗?
前端·css
Forever_xl19 分钟前
埋点监控平台全景调研
前端
神秘的猪头19 分钟前
JavaScript 中的 `map()` 方法详解与面向对象编程初探
前端·javascript
有点笨的蛋19 分钟前
这些 CSS 小细节没处理好,你的页面就会“闪、抖、卡”——渲染机制深度拆解
前端·css
烟袅22 分钟前
JavaScript 中 map 与 parseInt 的经典陷阱:别再被“巧合”骗了!
前端·javascript
烟袅23 分钟前
JavaScript 中 string 与 new String() 的本质区别:你真的懂“字符串”吗?
前端·javascript
_大学牲24 分钟前
从 0 到上架:用 Flutter 一天做一款功德木鱼
前端·flutter·apple