Пример «Динамической формы» в Ant Design

Ant Design

динамическая форма

Сложная внутренняя система управления не может избежать динамического увеличения или уменьшения элементов формы.В сочетании с Antd возникнет несколько проблем:

  • Как добавить новые элементы формы в уже написанную форму формы?
  • Как добавить новые поля формы дружественными? Или даже набор полей?
  • Как эти поля включены в исходную систему проверки достоверности?

я обращаюсь к официальному сайтуДинамическое увеличение или уменьшение элементов формы — пример, а потом "ломал голову", чтобы подготовить приличную демку.

Давайте посмотрим на визуализацию ниже, и я сделаю простое объяснение:

Как динамически добавлять элементы?

Добавлять элементы на страницу несложно, и теперь все интерфейсные фреймворки управляются данными.

Поэтому просто поддерживайте одну (массивную) переменную (в этом примере: dynamicGroup), затем добавляйте или удаляйте элементы в этот массив в соответствии с логикой модификации и, наконец, динамически отображайте соответствующую метку формы с помощью v-for.

<!-- 每个 a-row 就是相同一组的元素；a-col 展示不同字段 -->
<a-row v-for="(dynamicFields, index) of dynamicGroup" :key="index">
  <a-col>
    <!-- form-item 字段1-->
  </a-col>
  <a-col>
    <!-- form-item 字段2-->
  </a-col>
</a-row>

Как дружественно добавлять новые поля формы?

В коллекцию динамических элементов dynamicGroup я помещаю «партию» динамических полей dynamicFields (тоже тип массива).

// data
{
    dynamicGroup: [],
    dynamicFields: [
    {
        fieldName: 'username',
        //...
    },
    {
        fieldName: 'nickname',
        //...
    }
}

Затем в соответствующей логике добавления прямо поместите предустановленное правило dynamicFields в качестве нового элемента в dynamicGroup:

addDynamicGroup() {
    this.dynamicGroup.push(this.dynamicFields)
}

Если вы добавляете пакет полей каждый раз, когда добавляете их, вы можете поддерживать их в dynamicFields.Если у вас есть только одно поле, вы можете поддерживать массив.

Затем каждый элемент dynamicFields может поддерживать общие атрибуты (такие как: метка, заполнитель...)

{
    fieldName: 'username',
    label: '用户名',
    placeholder: '请输入用户名',
}

Как связать с проверкой формы?

Обратите внимание: я определяю метод функции декоратора (не ключ-значение) в каждом объекте поля в dynamicFields.

{
    fieldName: 'username',
    label: '用户名',
    placeholder: '请输入用户名',
    // 有意为之
    decorator(key) {
        return [key, {
            rules: [{
            required: true,
            message: '请输入用户名'
            }]
        }]
    }
}

Причина в том, что каждый пакет добавленных элементов формы «мы» независим друг от друга, и проверку необходимо передать v-decorator, и эта инструкция должна принимать «уникальное значение»: id, поэтому ключ здесь сделано динамично.

Таким образом, проверка окончательной формы может быть однозначно проверена по разным ключам.

<a-input :placeholder="item.placeholder" v-decorator="item.decorator(`tree[${index}][${item.fieldName}]`)" />

Обратите внимание, что каждый пакет содержит несколько полей, поскольку каждый пакет добавляется. Таким образом, этот ключ должен соответствовать форме определения сложных объектов (antd поможет нам разобрать значения):

`tree[${index}].${item.fieldName}`;

дружеское напоминание, структура массива содержит сложный объект с использованием вышеуказанной структуры, если вы используете следующую форму, значение не может быть отображено:

`tree[${index}][${item.fieldName}]`; //我是在实际开发中被坑了好久才醒悟的

// 然后又在项目里写下了如此代码（目前还没时间删掉 --||）
for (let i = 0; i < tree.length; i++) {
  const item = tree[i];
  for (let key in item) {
    self.form.setFieldsValue({
      [`tree[${i}][${key}]`]: item[key],
    });
  }
}

Суммировать

Пример кода может справиться с большинством распространенных требований к динамической форме.Операция удаления элементов формы в примере не выполняется, но она также очень проста.Я думаю, вы справитесь!

Наконец, приведенный выше код используется для описания демо-примера, извините за несоответствие.

В этой статье используетсяmdniceнабор текста

Категории