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教程