使用场景
大家应该遇到过如下图所示的需求,就是表格里带有输入框或者选择框,如果要求校验,怎么做?
先贴上代码,可以直接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的情况