在彈窗中 做 表格中放文本框並校驗
dialog 代碼：
<!-- 添加或修改申請報修對話框 -->
<el-dialog :title="title" :visible.sync="open" :fullscreen="true">
<!-- 添加報修事項按鈕 -->
<el-row :gutter="20" class="mb8">
<el-col :span="2">
<el-button @click="addItem" size="small" type="primary"
>添加報修事項</el-button
>
</el-col>
</el-row>
<!-- 表單表格校驗 -->
<el-row :gutter="10" class="mb8">
<el-col :span="24">
<el-form :model="formData" ref="formData">
<el-col :span="4">
<el-form-item label="報修地點" prop="place" :rules="rules.place">
<el-input
v-model="formData.place"
maxlength="50"
show-word-limit
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item
label="聯系方式"
prop="repairReportPhone"
:rules="rules.repairReportPhone"
>
<el-input v-model="formData.repairReportPhone"></el-input>
</el-form-item>
</el-col>
<el-table
:data="formData.tableData"
border
stripe
style="width: 100%"
height="300px"
max-height="300px"
>
<el-table-column
header-align="center"
align="center"
prop="sn"
label="序號"
width="100"
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="goodsName"
label="物品名稱"
width="250"
>
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.goodsName'"
:rules="rules.goodsName"
>
<el-input
v-model="scope.row.goodsName"
placeholder="物品名稱"
maxlength="50"
show-word-limit
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="faultDescription"
label="故障描述"
width="400"
>
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.faultDescription'"
:rules="rules.faultDescription"
>
<el-input
v-model="scope.row.faultDescription"
type="textarea"
placeholder="故障描述"
maxlength="500"
show-word-limit
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="上傳圖片"
width="200"
>
<template #default="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"
>點擊上傳</el-button
>
<el-button
size="mini"
@click="handleDelete(scope.$index, scope.row)"
>更換圖片</el-button
>
</template>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="圖片詳情"
>
<template width="40" slot-scope="scope">
<el-image
:src="scope.url"
style="width: 50px; height: 50px"
:fit="fill"
></el-image>
</template>
</el-table-column>
<el-table-column
label="操作"
header-align="center"
align="center"
width="150"
>
<template #default="scope">
<el-button
size="small"
type="text"
@click="handleEdit(scope.$index, scope.row)"
>編輯</el-button
>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.$index, scope.row)"
>刪除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
表單初始化:
// 表單參數
formData: {
place: "",
repairReportPhone: "",
tableData: [],
},
// 表單校驗
rules: {
place: [
{
required: true,
message: "報修地點不能為空",
trigger: ["blur", "change"],
},
],
repairReportPhone: [
{
required: true,
message: "聯系方式不能為空",
trigger: ["blur", "change"],
},
,
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "請輸入正確的手機號碼",
trigger: ["blur", "change"],
},
],
goodsName: [
{
required: true,
message: "物品名稱不能為空",
trigger: ["blur", "change"],
},
],
url: [
{
required: true,
message: "故障照片不能為空",
trigger: ["blur", "change"],
},
],
},
表格增加數據的方法：
// 增加一條數據 addItem() { let item = { sn: this.formData.tableData.length, goodsName: "", faultDescription: "", url: "", }; this.formData.tableData.push(item); },
提交校驗表單:
/** 提交按鈕 */
submitForm() {
this.$refs["formData"].validate((valid) => {
if (valid) {
}
});
},
效果展示:
