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

时间  2021-08-13
标签 css html vue element-ui 浏览器 markdown app this spa 栏目 HTML 繁體版
原文   原文链接

使用场景

你们应该遇到过以下图所示的需求，就是表格里带有输入框或者选择框，若是要求校验，怎么作？css

表格嵌套表单控件

先贴上代码，能够直接copy至本地，用浏览器打开便可html

<!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的状况vue

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程