el-table 表格中 必填校验

效果：

 

 html:

  <body>
        <div id="vue_container">
            <el-form :model="popup_Win" ref="popup_Win">
                <el-table
                    :data="popup_Win.tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                    </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-column
                        width="280"
                        prop="num"
                        label="计算器">
                        <template slot-scope="scope">   
                            <el-form-item :prop="'tableData.' + scope.$index +
                                '.num'" :rules="rules.num"
                                style="margin-bottom: 0;"
                                :inline-message="true">
                                <el-input-number v-model="scope.row.num"
                                    :min="0" :max="scope.row.num" label=""
                                    οninput="value=value.replace(/[^\d]/g,'')">
                                </el-input-number>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="count"
                        label="数量">
                        <template slot-scope="scope">
                            <!-- {{scope.row}} -->
                            <!-- <el-input v-model="scope.row.num"></el-input> -->
                            <el-form-item :prop="'tableData.' + scope.$index +
                                '.count'" :rules="rules.count"
                                style="margin-bottom: 0;"
                                :inline-message="true">
                                <el-input v-model="scope.row.count"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div class="buttonbox">
                <el-button type="primary" @click="confirm()">确定</el-button>
            </div>

        </div>
    </body>

js：

var VueContainer = null;
$(function () {
    VueContainer = new Vue({
        el: "#vue_container",
        data() {
            return {
                popup_Win: {
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        num: 20,
                        count: ''
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄',
                        num: 0,
                        count: ''
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄',
                        num: 0,
                        count: ''
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄',
                        num: 0,
                        count: ''
                    }]
                },
                rules: { // 验证规则
                    num: [
                        {
                            required: true,
                            message: '请输入',
                            trigger: 'change'
                        }
                    ],
                    count: [
                        {
                            required: true,
                            message: '请输入',
                            trigger: 'blur'
                        }
                    ]
                }


            }
        },
        methods: {
            // 确定按钮
            confirm() {
                var this_ = this;
                this_.$refs['popup_Win'].validate((valid) => {
                    if (valid) {

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },

    })

})

 

　　

 

posted @ 2022-11-11 17:09  蓝色精灵jah  阅读(2548)  评论(1)  编辑  收藏  举报