Element-Plus中实现表格中字段表单验证

Bunury

于 2024-10-13 22:28:55 发布

阅读量278

点赞数 2

分类专栏： Element-plus 文章标签：前端 javascript linux

本文链接：https://blog.csdn.net/weixin_49352307/article/details/142905677

版权

Element-plus 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

创建表单

//定义表单数据
const formModel = ref({
    supplierName: '',      //'供应商名称',          
    orderCode: 'OP165656',      //'订单号',       
    items: [
        { name: '小明', age: 20, getder: '男' }
    ]
})

定义表单规则

//定义表单规则
const rules = {
    orderCode: [{ required: true, message: '请选择订单编号', trigger: 'change' }],
    supplierName: [{ required: true, message: '请选择供应商名称', trigger: 'change' }],
    items: [
        {
            name: [{ required: true, message: '请选择姓名', trigger: 'change' }],
            age: [{ required: true, message: '请选择年龄', trigger: 'change' }],
            getder: [{ required: true, message: '请选择性别', trigger: 'change' }],
        }
    ]
}

核心代码:

  <el-table-column label="物料名称" min-width="180" prop="materialName">
                            <template #default="{ row, $index }">
                                <el-form-item :prop="`items.${$index}.name`" :rules="rules.items[0].name">
                                    <el-input v-model="row.name" size="large" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>

整体代码:

  <el-form ref="ordeformRef" :model="formModel" :rules="rules" label-position="right" label-width="auto">
    <el-card class="border-none" shadow="never" style="margin-top: 20px;">
                    <template #header>
                        订单明细
                    </template>
                    <el-button @click="addwuliaoInfo">添加物料信息</el-button>
                    <el-table :data="formModel.items" style="width: 100%" border>
                        <el-table-column type="selection" width="60" />
                        <el-table-column label="物料名称" min-width="180" prop="materialName">
                            <template #default="{ row, $index }">
                                <el-form-item :prop="`items.${$index}.name`" :rules="rules.items[0].name">
                                    <el-input v-model="row.name" size="large" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="specification" label="物料规格" min-width="180">
                            <template #default="{ row, $index }">
                                <el-form-item :prop="`items.${$index}.age`" :rules="rules.items[0].age">
                                    <el-input v-model="row.age" size="large" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="basicUnit" label="基本计量单位" min-width="180">
                            <template #default="{ row ,$index}">
                                <el-form-item :prop="`items.${$index}.getder`" :rules="rules.items[0].getder">
                                    <el-input v-model="row.getder" size="large" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-card>
 </el-form>