实现效果：
既然说开箱即用，那么直接贴代码
Vue2版本
<template>
<el-card>
<el-form :model="tableData" >
<el-table :data="tableData">
<el-table-column label="游戏" prop="gameName" min-width="1"></el-table-column>
<el-table-column label="临时调整" prop="tempSetting" min-width="1">
<template v-slot="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 v-slot="scope">
<el-form-item :prop="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 v-slot="scope">
<el-form-item :prop=" 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>
</el-card>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
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:[
{
gameId: "4",
gameName: "双色球",
tempSetting: false,
minCashPerTick: "1.00",
maxCashPerTick: "30000.00",
},
{
gameId: "5",
gameName: "快乐十分",
tempSetting: false,
minCashPerTick: "1.00",
maxCashPerTick: "30000.00",
},
],
// 单选列表
radioList: [{
value: true,
text: '是'
}, {
value: false,
text: '否'
}],
// 校验规则
rules: {
minCashPerTick: [
{ validator: minCashPerTickValidator, trigger: ['change', 'blur'] }
],
maxCashPerTick: [
{ validator: maxCashPerTickValidator, trigger: ['change', 'blur'] }
]
}
}
}
})
</script>
vue3版本
<template>
<el-card>
<el-form :model="tableData">
<el-table :data="tableData">
<el-table-column label="游戏" prop="gameName" min-width="1"></el-table-column>
<el-table-column label="临时调整" prop="tempSetting" min-width="1">
<template v-slot="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 v-slot="scope">
<el-form-item :prop="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 v-slot="scope">
<el-form-item :prop=" 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>
</el-card>
</template>
<script lang="ts" setup>
import {ref } from 'vue'
const tableData = ref([
{
gameId: "4",
gameName: "双色球",
tempSetting: false,
minCashPerTick: "1.00",
maxCashPerTick: "30000.00",
},
{
gameId: "5",
gameName: "大乐透",
tempSetting: true,
minCashPerTick: "2.00",
maxCashPerTick: "50000.00",
}
]);
// 单选列表
const radioList= [{
value: true,
text: '是'
}, {
value: false,
text: '否'
}];
// 校验规则
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('输入错误，请输入数字值'))
}
}
const rules={
minCashPerTick: [
{ validator: minCashPerTickValidator, trigger: ['change', 'blur'] }
],
maxCashPerTick: [
{ validator: maxCashPerTickValidator, trigger: ['change', 'blur'] }
]
}
</script>
[来源](Element-ui在Table表格中嵌套input、select等表单控件的校验使用场景大家应该遇到过如下图所示的需求 - 掘金)
