Element UI 动态增减表单项以及表单域校验

最新推荐文章于 2024-07-10 16:18:57 发布

xiaopengli@2021

最新推荐文章于 2024-07-10 16:18:57 发布

阅读量1k

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/xiaoxiaocxy/article/details/105725977

版权

本文介绍了如何在项目中利用Element UI实现动态增加和删除表单项，并结合表单域进行数据校验。通过提供Table表格和Form组件的示例，详细阐述了prop的设置方式（如'certsList.' + index + '.name'）以及如何在表单项内定义校验规则。

摘要由CSDN通过智能技术生成

前言

项目上使用 Element UI 实现动态增减表单项以及表单域校验的效果，网上查了资料并参考官网文档，完成了实现。整理一下，写了一个Demo，做个记录。

Demo

Table 表格

<template>
  <div id="PageOne">
    <!--查询条件-->
    <div>
      <el-form label-width="80px"
               size="small"
               label-position="right"
               :model="queryParam">
        <el-row>

          <el-col :span="5">

            <el-form-item label="姓名">
              <el-input v-model="queryParam.userName"
                        placeholder="请输入姓名"></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="4">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-search"
                       @click="searchQuery">查询</el-button>

            <el-button type="info"
                       size="small"
                       icon="el-icon-refresh"
                       @click="searchReset">重置</el-button>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="5"
                  style="text-align: left">
            <el-button type="success"
                       size="small"
                       icon="el-icon-circle-plus-outline"
                       @click="add">新增</el-button>

          </el-col>
        </el-row>

      </el-form>
    </div>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <!--数据表格-->
    <div>
      <el-table v-loading="loading"
                size="small"
                :data="tableData"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="80">
        </el-table-column>
        <el-table-column prop="userName"
                         align="center"
                         label="姓名">
        </el-table-column>

        <el-table-column prop="deptName"
                         align="center"
                         label="部门">
        </el-table-column>

        <el-table-column prop="rank"
                         align="center"
                         label="职位">
        </el-table-column>

        <el-table-column prop="entryTime"
                         align="center"
                         label="入职时间"
                         width="180">
        </el-table-column>

        <el-table-column align="center"
                         label="操作">

          <template slot-scope="scope">