Element-ui在Table表格中嵌套input、select等表单控件的校验

6,406 阅读4分钟

使用场景

大家应该遇到过如下图所示的需求,就是表格里带有输入框或者选择框,如果要求校验,怎么做?

表格嵌套表单控件

先贴上代码,可以直接copy至本地,用浏览器打开即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入 CSS -->
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css"/>
</head>
<!-- 导入 vue.js -->
<script src="//unpkg.com/vue/dist/vue.js"></script>
<!-- 导入 index.js -->
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<body>
<div id="app">
    <el-button type="primary" @click="addListItem()" size="mini">添加</el-button>
    <el-form :model="Obj" ref="form" size="small">
        <el-table :data="Obj.tableData" border stripe fit style="width: 100%;">
<!--            <el-table-column label="序号" type="index" :index="indexMethod" width="50" align="center" >-->
            <el-table-column label="序号" width="50" align="center" >
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="游戏" prop="gameName" min-width="1"></el-table-column>
            <el-table-column label="临时调整" prop="tempSetting" min-width="1">
                <template slot-scope="scope">
                    <el-form-item>
                        <el-select v-model="scope.row.tempSetting">
                            <el-option v-for="item in radioList" :value="item.value" :label="item.text" :key="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="单票最小兑奖金额(可以是小数)" min-width="1">
                <template slot-scope="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.' + 'minCashPerTick'" :rules="rules['minCashPerTick']">
                        <el-input v-model="scope.row.minCashPerTick" maxlength="9">
                            <template slot="append"></template>
                        </el-input>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="单票最大兑奖金额(整数)" min-width="1">
                <template slot-scope="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.' + 'maxCashPerTick'" :rules="rules['maxCashPerTick']">
                        <el-input v-model.number="scope.row.maxCashPerTick" maxlength="9">
                            <template slot="append"></template>
                        </el-input>
                    </el-form-item>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            const minCashPerTickValidator = (rule, value, callback) => {
                console.log(value)
                console.log(Number(value))
                if (value == undefined || value == '') {
                    return callback(new Error('请输入单票最小兑奖金额'))
                }
                if (Number(value)) {
                    if (Number(value) <= 100000) {
                        callback()
                    } else {
                        callback(new Error('输入金额不能超过10万元'))
                    }
                } else {
                    callback(new Error('输入错误,请输入数字值'))
                }
            }
            const maxCashPerTickValidator = (rule, value, callback) => {
                // 如果没有v-model.number修饰符,则value不会自动转化为number类型,就需要借助Number.isInteger
                console.log(value)
                console.log(Number.isInteger(value))
                console.log(value*1)
                console.log(Number.isInteger(value*1))
                let maxCash = value*1
                if (value == undefined || value == '') {
                    return callback(new Error('请输入单票最大兑奖金额'))
                }
                if (Number.isInteger(maxCash)) {
                    if (maxCash <= 100000) {
                        callback()
                    } else {
                        callback(new Error('输入金额不能超过10万元'))
                    }
                } else {
                    callback(new Error('输入错误,请输入数字值'))
                }
            }
            return {
                // tableData数据
                Obj: {
                    tableData: []
                },
                // 单选列表
                radioList: [{
                    value: true,
                    text: '是'
                }, {
                    value: false,
                    text: '否'
                }],
                // 校验规则
                rules: {
                    minCashPerTick: [
                        // { required: true, message: '请输入单票最小兑奖金额', trigger: 'blur' },
                        { validator: minCashPerTickValidator, trigger: ['change', 'blur'] }
                    ],
                    maxCashPerTick: [
                        // { required: true, message: '请输入单票最大兑奖金额', trigger: 'blur' },
                        { validator: maxCashPerTickValidator, trigger: ['change', 'blur'] }
                    ]
                }
            }
        },
        mounted() {
            // 获取数据
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                console.log(index)
                return index + 1
            },
            addListItem() {
                this.Obj.tableData = []
                let dataList = [
                    {
                        stationId: "45010363",
                        gameId: "4",
                        gameName: "双色球",
                        wager: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cash: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cancel: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancelTimeLimit: null,
                        issueCancelMoney: "1000.00",
                        issueCancelTimes: "0",
                        minMoneyPerTick: "2.00",
                        maxMoneyPerTick: "20000.00",
                        stationCashMode: "0",
                        minCashPerTick: "1.00",
                        maxCashPerTick: "30000.00",
                        minWinLevel: "0",
                        maxWinLevel: "0",
                        protectMoney: "300.00",
                        saleCommission: "0.0750",
                        cashCommission: "0.0100",
                        stationProvRate: null,
                        stationCityRate: null,
                        stationZCRate: null,
                        saleStartTime: null,
                        saleEndTime: null,
                        tempSetting: false
                    },
                    {
                        stationId: "45010363",
                        gameId: "5",
                        gameName: "快乐十分",
                        wager: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cash: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cancel: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancelTimeLimit: null,
                        issueCancelMoney: "1000.00",
                        issueCancelTimes: "0",
                        minMoneyPerTick: "2.00",
                        maxMoneyPerTick: "20000.00",
                        stationCashMode: "0",
                        minCashPerTick: "1.00",
                        maxCashPerTick: "30000.00",
                        minWinLevel: "0",
                        maxWinLevel: "0",
                        protectMoney: "20000.00",
                        saleCommission: "0.0800",
                        cashCommission: "0.0100",
                        stationProvRate: null,
                        stationCityRate: null,
                        stationZCRate: null,
                        saleStartTime: null,
                        saleEndTime: null,
                        tempSetting: false
                    },
                    {
                        stationId: "45010363",
                        gameId: "6",
                        gameName: "3D",
                        wager: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cash: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cancel: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancelTimeLimit: null,
                        issueCancelMoney: "1000.00",
                        issueCancelTimes: "0",
                        minMoneyPerTick: "2.00",
                        maxMoneyPerTick: "20000.00",
                        stationCashMode: "0",
                        minCashPerTick: "1.00",
                        maxCashPerTick: "30000.00",
                        minWinLevel: "0",
                        maxWinLevel: "0",
                        protectMoney: "300.00",
                        saleCommission: "0.0750",
                        cashCommission: "0.0100",
                        stationProvRate: null,
                        stationCityRate: null,
                        stationZCRate: null,
                        saleStartTime: null,
                        saleEndTime: null,
                        tempSetting: false
                    },
                    {
                        stationId: "45010363",
                        gameId: "7",
                        gameName: "七乐彩",
                        wager: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cash: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancel: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancelTimeLimit: null,
                        issueCancelMoney: "1000.00",
                        issueCancelTimes: "0",
                        minMoneyPerTick: "2.00",
                        maxMoneyPerTick: "20000.00",
                        stationCashMode: "0",
                        minCashPerTick: "1.00",
                        maxCashPerTick: "30000.00",
                        minWinLevel: "0",
                        maxWinLevel: "0",
                        protectMoney: "300.00",
                        saleCommission: "0.0750",
                        cashCommission: "0.0100",
                        stationProvRate: null,
                        stationCityRate: null,
                        stationZCRate: null,
                        saleStartTime: null,
                        saleEndTime: null,
                        tempSetting: false
                    },
                    {
                        stationId: "45010363",
                        gameId: "8",
                        gameName: "快乐双彩",
                        wager: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cash: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancel: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancelTimeLimit: null,
                        issueCancelMoney: "1000.00",
                        issueCancelTimes: "0",
                        minMoneyPerTick: "2.00",
                        maxMoneyPerTick: "20000.00",
                        stationCashMode: "0",
                        minCashPerTick: "1.00",
                        maxCashPerTick: "30000.00",
                        minWinLevel: "0",
                        maxWinLevel: "0",
                        protectMoney: "300.00",
                        saleCommission: "0.0750",
                        cashCommission: "0.0100",
                        stationProvRate: null,
                        stationCityRate: null,
                        stationZCRate: null,
                        saleStartTime: null,
                        saleEndTime: null,
                        tempSetting: false
                    },
                    {
                        stationId: "45010363",
                        gameId: "9",
                        gameName: "快3",
                        wager: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cash: {
                            "code": "1",
                            "text": "允许",
                            "value": "allow"
                        },
                        cancel: {
                            "code": "0",
                            "text": "禁止",
                            "value": "ban"
                        },
                        cancelTimeLimit: null,
                        issueCancelMoney: "1000.00",
                        issueCancelTimes: "0",
                        minMoneyPerTick: "2.00",
                        maxMoneyPerTick: "20000.00",
                        stationCashMode: "0",
                        minCashPerTick: "1.00",
                        maxCashPerTick: "30000.00",
                        minWinLevel: "0",
                        maxWinLevel: "0",
                        protectMoney: "300.00",
                        saleCommission: "0.1000",
                        cashCommission: "0.0100",
                        stationProvRate: null,
                        stationCityRate: null,
                        stationZCRate: null,
                        saleStartTime: null,
                        saleEndTime: null,
                        tempSetting: false
                    }
                ]
                dataList.forEach(item => {
                    this.Obj.tableData.push({
                        // gameId: item.gameId,
                        gameName: item.gameName,
                        // stationCode: item.stationId,
                        // tempSetting: item.tempSetting,  // 临时调整
                        minCashPerTick: item.minCashPerTick, // 单票最小兑奖金额
                        maxCashPerTick: item.maxCashPerTick, // 单票最大兑奖金额
                        // oldMinCashPerTick: item.minCashPerTick, // 原单票最小兑奖金额
                        // oldMaxCashPerTick: item.maxCashPerTick  // 原单票最大兑奖金额
                    })
                })
                console.log(this.Obj.tableData)
            },
            getTableData() {
                this.Obj.tableData = [{
                    // gameId: item.gameId,
                    gameName: '大乐透',
                    // stationCode: item.stationId,
                    // tempSetting: item.tempSetting,  // 临时调整
                    minCashPerTick: '123', // 单票最小兑奖金额
                    maxCashPerTick: '456', // 单票最大兑奖金额
                    // oldMinCashPerTick: item.minCashPerTick, // 原单票最小兑奖金额
                    // oldMaxCashPerTick: item.maxCashPerTick  // 原单票最大兑奖金额
                }]
            }
        }
    })
</script>
</html>

需要注意的是,el-form-item的prop绑定的值不仅需要与rules校验规则中的验证项对应,还必须与该el-form-item下的控件的v-model值对应,否则会出现value值为undefined的情况