element table表格内进行表单验证(简单例子,一看就会,亲测有用~)开箱即用!!

效果图:

在这里插入图片描述

代码:

<div> 
			<el-form ref="form" :model="form" >
                        <el-table :data="form.tableData" align="center" border>
                            <el-table-column label="名称">
                                <template slot-scope="scope">
                                    <el-form-item label="" :prop="'tableData.'+scope.$index+'.name'"
                                                  :rules="rules.name" >
                                        <el-input v-model="scope.row.name"></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="年龄">
                                <template slot-scope="scope">
                                    <el-form-item label="" :prop="'tableData.'+scope.$index+'.value'"
                                                  :rules="rules.value" >
                                        <el-input v-model="scope.row.value" ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                        </el-table>
                </el-form>
                <el-button @click="summit">确定</el-button>
	
</div>	


data() {
        return {
            form: {
                tableData: [
                    { name: "", value: "" },
                    { name: "", value: "" },
                ]
            },
            rules: {
                value:{
                    required: true,
                    message: "此项必填",
                    trigger: "blur"
                },
                name:{
                    required: true,
                    message: "此项必填",
                    trigger: "blur"
                }
            },
        }
    },

methods: {
		summit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$message({
                        message: "校验通过",
                        type: "success"
                    });
                }
            });
        },
}

开箱即用!!啊兄弟们~

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-12 17:54:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-12 17:54:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-12 17:54:02       82 阅读
  4. Python语言-面向对象

    2023-12-12 17:54:02       91 阅读

热门阅读

  1. BF字符串匹配(C++)

    2023-12-12 17:54:02       47 阅读
  2. react内置组件之<fragment></fragment>

    2023-12-12 17:54:02       50 阅读
  3. IntelliJ插件开发-Code Vision Hints

    2023-12-12 17:54:02       68 阅读
  4. 汇总区间算法(leetcode第228题)

    2023-12-12 17:54:02       51 阅读
  5. html左右分页【搬代码】

    2023-12-12 17:54:02       62 阅读
  6. php面试题

    2023-12-12 17:54:02       75 阅读
  7. Intel IOMMU (VT-d) initialization for Linux

    2023-12-12 17:54:02       60 阅读
  8. Stream API 流使用的详细示例

    2023-12-12 17:54:02       50 阅读
  9. 比较电路交换、报文交换、分组交换

    2023-12-12 17:54:02       46 阅读
  10. SQL命令---查看数据库表

    2023-12-12 17:54:02       59 阅读
  11. 占位符哈哈哈哈

    2023-12-12 17:54:02       58 阅读