el-table动态新增行及动态校验

最新推荐文章于 2024-08-21 13:27:25 发布

sunshine 覃糖

最新推荐文章于 2024-08-21 13:27:25 发布

阅读量1k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/tan_xiao_tan/article/details/123982071

版权

本文将介绍如何在Vue.js应用程序中使用el-table组件实现表格动态新增行，并结合表单验证功能。通过监听表格数据的变化，动态添加和移除行，并确保每行数据在提交前都经过有效的校验。

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

<template>
  <div style="width: 1200px">
    <el-button @click="add">新增</el-button>
    <el-button @click="exit">导入</el-button>
    <el-form
      ref="regionTable"
      :rules="rules"
      :model="regionForm"
      label-width="80px"
    >
      <el-table :data="regionForm.regionTable" style="width: 100%">
        <el-table-column prop="region" label="活动区域">
          <template slot-scope="{ row, $index }">
            <el-form-item
              v-if="currentIndex === $index"
              :prop="'regionTable.' + $index + '.region'"
              :rules="rules.region"
            >
              <el-select v-model="row.region" placeholder="请选择">
                <el-option
                  v-for="item in originOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                  >{
   {
    item.label }}</el-option
                >
              </el-select>
            </el-form-item>
            <span v-else>{
   {
    row.regionCh }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称">
          <template slot-scope="{ row, $index }">
            <el-form-item