＜el-table＞中的自定义列验证

最新推荐文章于 2025-03-12 14:24:08 发布

⑧o年崋

最新推荐文章于 2025-03-12 14:24:08 发布

阅读量710

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/xnlzg/article/details/107809754

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

<div id="app">
  <el-button type="primary" v-on:click="submitForm('ruleForm')">测试</el-button>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-table :data="ruleForm.tableData" style="width: 100%">
      <el-table-column label="日期" width="280">
        <template slot-scope="scope">
                            <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules='rules.test'>
                                <el-input style="width:100%"  v-model="scope.row.date" ></el-input>
                            </el-form-item>
         </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </el-form>
</div>

 data() {
      return {
        ruleForm: {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
           },
        rules: { 
          test: [
            { required: true, message: '请输入日期', trigger: 'change' }
          ] 
        }
      };
    }