一、直接在 el-table-column 外嵌套 el-form 符合表單的校驗習慣，唯一需要註意的地方 el-form 需要綁定 :model="scope.row" // html <div id="app"> <el-table :data="list" border> <el-table- ...
一、直接在 el-table-column 外嵌套 el-form
符合表單的校驗習慣，唯一需要註意的地方 el-form 需要綁定 :model="scope.row"
// html
<div id="app">
<el-table :data="list" border>
<el-table-column label="姓名" width="250">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="name">
<el-input
v-model="scope.row.age"
placeholder="請輸入姓名"
></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="年齡" width="250"> </el-table-column>
<el-table-column label="郵箱" width="250"> </el-table-column>
</el-table>
</div>
// js
data() {
return {
list: [
{ name: "", age: "", mail: "" },
{ name: "Vue", age: "6", mail: "[email protected]" },
],
rules: {
name: [
{ required: true, message: "請輸入活動名稱", trigger: "blur" },
{
min: 3,
max: 5,
message: "長度在 3 到 5 個字元",
trigger: "blur",
},
],
},
};
}
二、迴圈 el-form-item 校驗
el-table 往往具有多行內容，要想對每行的表單輸入控制項都進行校驗，可以用 el-form 將整個 el-table 嵌套進去，然後在 el-table-column 中用 el-form-item 將待校驗的表單輸入控制項嵌套進入:
- 為了區分是哪一行進行的校驗，需要動態綁定 prop 到 el-form-item 元素
- el-form-item 的 prop、rules以及表單控制項的 v-model，三者的值必須一致，校驗才能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表單校驗</title>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="app">
<!-- 使用 el-form 將整個 el-table 包裹起來 -->
<el-form ref="form" :model="form">
<el-table :data="form.list" border>
<el-table-column label="姓名" width="250px">
<template slot-scope="scope">
<!-- 為了區分是哪一行進行的校驗，需要動態綁定 prop 到 el-form-item 元素-->
<!-- prop/rules/v-model三者的值必須一致，校驗才能生效 -->
<el-form-item
:prop="'list.' + scope.$index + '.name'"
:rules="rules.name"
>
<el-input
v-model="scope.row.name"
placeholder="請輸入姓名"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="年齡" width="250px">
<template slot-scope="scope">
<el-form-item
:prop="'list.' + scope.$index + '.age'"
:rules="rules.age"
>
<el-input
v-model="scope.row.age"
placeholder="請輸入年齡"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="郵箱" width="250px">
<template slot-scope="scope">
<el-form-item
:prop="'list.' + scope.$index + '.mail'"
:rules="rules.mail"
>
<el-input
v-model="scope.row.mail"
placeholder="請輸入郵箱地址"
></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
form: {
// 表格數據 list 為 表單數據 form 的嵌套元素
list: [
{ name: "", age: "", mail: "" },
{ name: "Vue", age: "6", mail: "[email protected]" },
],
},
rules: {
name: [
{ required: true, message: "請輸入活動名稱", trigger: "blur" },
{
min: 3,
max: 5,
message: "長度在 3 到 5 個字元",
trigger: "blur",
},
],
age: [
{
validator: function (rule, value, callback) {
if (/^[0-9]*$/.test(value) == false) {
callback(new Error("請輸入正確的數字"));
} else {
callback();
}
},
trigger: "blur",
},
],
mail: [
{ type: "email", message: "請輸入正確的Email", trigger: "blur" },
],
},
};
},
});
</script>
</html>
三、直接使用表單項的 error 校驗
使用 error 的好處是可以利用插槽自定義錯誤信息的顯示樣式，當 error 的值不為空時，會顯示綁定的錯誤信息，並且覆蓋 rules
// html
<el-table :data="list" border>
<el-table-column label="姓名" width="250">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules" :error="errMsg">
<el-form-item prop="name">
<el-input
v-model="scope.row.age"
placeholder="請輸入姓名"
></el-input>
<span
slot="error"
class="el-form-input_tip el-form-item__error"
>
{{errMsg}}
</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
// js
data() {
return {
errMsg: "請輸入姓名",
list: [
{ name: "", age: "", mail: "" },
{ name: "Vue", age: "6", mail: "[email protected]" },
],
rules: {
name: [
{ required: true, message: "請輸入活動名稱", trigger: "blur" },
{
min: 3,
max: 5,
message: "長度在 3 到 5 個字元",
trigger: "blur",
},
],
},
};
}
