如何验证<el-table>中的自定义列

Question

请问，如何才能验证<el-table>中的自定义列

<el-table v-bind:data="points"
                  style="width: 100%"
                  stripe
                  border>
            <el-table-column label="测试列1"
                             align="center"
                             width="180">
                <template scope="scope">
                        <el-input v-model="scope.row.Input_Value"></el-input>
                </template>
            </el-table-column>
        </el-table>

 var app = new Vue({
        el: "#app",
        data: {
            points: [
            { Input_Value:1 },
            { Input_Value:2 },
            { Input_Value:3 }
            ] 
        } 
    });

需要验证scope.row.Input_Value不能为空

Answer 1

没想到不少人关注,解决方法如下:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.7/lib/index.js"></script>
<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>

var Main = {
    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' }
          ] 
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }

或者看这里 table自定义列验证

Answer 2

https://github.com/huangshuwe...
这个里面可以编辑每一个cell，可以看一下

Answer 3

大佬，这个问题你解决了吗？

Answer 4

同样遇到~表单里面有表格，表格里面的每一项都可编辑可验证~

Answer 5

我目前就是循环表格数组，去判断每一行的值是否符合规则

Answer 6

nice 已经解决 感谢大佬