Vue + Element ui реализует динамические формы, включая функции добавления/удаления строк/проверки/отправки динамической формы.
Vue + Element ui реализует динамические формы, включая функции добавления/удаления строк/проверки/отправки динамической формы.

Резюме/Чжу Цзицянь

Недавно функция динамической формы была реализована через Vue + Element ui. Эта функция также включает в себя функции добавления новых строк, удаления строк, динамической проверки формы и отправки динамической формы в динамических формах. Ударьте железом, пока оно горячее, и запишите. опыт разработки, чтобы облегчить использование подобных функций в будущем. При использовании применяйте их напрямую.

Упрощенный рендеринг страницы выглядит следующим образом:

Сначала я использовал чистую форму. Позже я обнаружил, что проверить каждое поле ввода при отправке непросто. Если это форма, вы можете напрямую установить значение каждого поля ввода с помощью правил, поэтому я вложил его. форма внутри формы. Следует отметить, что :prop="scope. в el-form-item.

Язык кода:javascript
копировать
<template>
  <div >
        <div>
          <div>
            <el-button  size="small"  @click="addRow">Новый</el-button>
          </div>
          <!--наборформа-->
          <el-form :model="studentData" ref="data" label-width="auto">
          <el-table
            border
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="studentData"
            ref="table"
            style="width: 100%"
          >

            <el-table-column align="center"   label="Имя">
              <template slot-scope="scope">
              <!--лист Вложенный внутриформа-->
                <el-form-item
                  :prop="scope.$index + '.name'"
                  :rules="{ required: true, message: 'Имя не может быть пустым', trigger: 'blur' }"
                >
                <el-input
                  v-model="studentData[scope.$index].name"
                  autocomplete="off"
                  size="small"
                  заполнитель="имя"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center"  label="возраст">
              <template slot-scope="scope">
                  <el-form-item
                    :prop="scope.$index + '.age'"
                    :rules="{ required: true, message: «Возраст не может быть пустым», trigger: 'blur' }"
                  >
                <el-input
                  v-model="studentData[scope.$index].age"
                  autocomplete="off"
                  size="small"
                  type='number'
                  Placeholder="номер банка, открывающего счет получателя"
                ></el-input>
                  </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center"  label="пол">
              <template slot-scope="scope">
                <el-form-item
                  :prop="scope.$index + '.sex'"
                  :rules="{ required: true, message: «Пол не может быть пустым», trigger: 'blur' }"
                >
                <el-input
                  v-model="studentData[scope.$index].sex"
                  autocomplete="off"
                  size="small"
                  заполнитель = «пол»
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column fixed="right" метка="операция" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleDeleteRow(studentData[scope.$index])"
                  type="text"
                  size="small"
                >удалить</el-button
                >
              </template>
            </el-table-column>
            
          </el-table>
          </el-form>
        </div>
        
        <div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
          <el-button size="mini"  @click="submit">представлять на рассмотрение</el-button>
          <el-button size="mini" @click="resetForm()">перезагрузить</el-button>
        </div>
  </div>
</template>

Определите переменную массива для хранения данных динамической таблицы.

Язык кода:javascript
копировать
export default {
  data() {
    return {
      studentData:[],
    };
  },
  ......
}

Добавьте связанные методы в метод методов, а именно добавление строк, удаление строк и отправку ——

Язык кода:javascript
копировать
methods:{

  /**
   * Добавить новую строку
   */
  addRow() {
    let index = this.studentData.length ;
    this.studentData.push({
      key: index,
      name:'',
      age:'',
      sex:'',
    });
  },

  /**
   * Удалить строку
   * @param row
   */
  handleDeleteRow(row){
    let datas = this.studentData;
    for (var i = 0; i < datas.length; i++){
      if (datas[i].key == row.key){
        datas.splice(i,1);
      }
    }
  },

  /**
   * представлять на рассмотрение
   */
  submit() {
    this.$refs["data"].validate(valid => {
      //valid имеет значение true, что означает, что форма была проверена. Если значение false, это означает, что форма не прошла проверку.
        if (valid) {
          save(this.studentData).then(response => {
            this.$message({
              message: 'представлять на рассмотрениеуспех',
              type: 'success'
            });
          });
        }
    });
  },

  /**
   * перезагрузить
   */
  resetForm() {
    let datas = this.studentData;
    for (var i = 0; i < datas.length; i++){
      datas[i].name='';
      datas[i].age='';
      datas[i].sex='';
    }
  },
}

Установите правила проверки формы, которые можно установить единообразно в правилах, или вы можете установить их индивидуально в каждом поле ввода. Здесь я устанавливаю их в каждом поле ввода индивидуально, то есть: Rules="{ требуется: true, message: 'Name. не может быть пустым. ', триггер: 'blur' }" это нормально. Конечно, вы также можете создать более сложные пользовательские правила.

Язык кода:javascript
копировать
<el-table-column align="center"   label="Имя">
          <template slot-scope="scope">
          <!--лист Вложенный внутриформа-->
            <el-form-item
              :prop="scope.$index + '.name'"
              :rules="{ required: true, message: 'Имя не может быть пустым', trigger: 'blur' }"
            >
            <el-input
              v-model="studentData[scope.$index].name"
              autocomplete="off"
              size="small"
              заполнитель="имя"
            ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose