在弹窗中 做 表格中放文本框并校验
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) {
}
});
},
效果展示:
