解决如何根据表单的下拉框选择在当前表单目录下弹出新的表单内容

最新推荐文章于 2024-08-22 19:25:50 发布

打小就很皮...

最新推荐文章于 2024-08-22 19:25:50 发布

阅读量657

点赞数 9

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_70172010/article/details/136786431

版权

一、在相应的vue组件添加a-form标签等内容

1.加入表单内容

<a-form :rules="rules" :model="watchData" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="中文名称" name="chinese">
          <a-input placeholder="请输入标准中文数名称" v-model:value="watchData.chinese" />
        </a-form-item>
        <a-form-item label="英文名称" name="eng">
          <a-input placeholder="请输入标准英文名称" v-model:value="watchData.eng" />
        </a-form-item>
        <a-form-item label="标准说明" name="standardName">
          <a-input placeholder="请输入标准说明" v-model:value="watchData.standardName" />
        </a-form-item>
        <a-form-item label="来源机构" name="source">
          <a-select v-model:value="watchData.source">
              <a-select-option value="status1">数宜信</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="数据类型" name="dataType">
        <a-select v-model:value="watchData.dataType">
            <a-select-option value="status1">Int</a-select-option>
            <a-select-option value="status2">Float</a-select-option>
            <a-select-option value="status3">Enum</a-select-option>
            <a-select-option value="status4">String</a-select-option>
        </a-select>
      </a-form-item>

注意：数据绑定等其他内容自行修改或者pass删除即可

2.效果图

注意：这是我自行添加了a-modal标签情况下的效果，可自行添加

二、实现点击下拉框属性值之后出现新的表单

1.最初效果图

例如：

2.form表单中添加新表单

<!-- 选项Int -->
      <a-form-item label="取值范围" name="">
        <a-input-number v-model:value="watchData.min" :max="watchData.max" placeholder="请输入标准数据最小值"/>
        <span>-</span>
        <a-input-number v-model:value="watchData.max" :min="watchData.min" placeholder="请输入标准数据最大值"/>
      </a-form-item>
      <!-- 新表单项：默认值 -->
      <a-form-item label="默认值" name="defaultValue">
        <a-input v-model:value="watchData.defaultValue" placeholder="请输入标准数据默认值"/>
      </a-form-item>  

      <!--选项Float-->
      <a-form-item label="数据精度" name="precision">
        <a-input v-model:value="watchData.precision" placeholder="请输入标准数据保留小数位数"/>
      </a-form-item>
      <a-form-item label="取值范围" name="precision">
        <a-input-number v-model:value="watchData.min" :min="0" :max="100" style="width: 173px;" placeholder="请输入标准数据最大值"/>
        <span>-</span>
        <a-input-number v-model:value="watchData.max" :min="0" :max="100" style="width: 173px;" placeholder="请输入标准数据最大值"/>
      </a-form-item>
      <!-- 新表单项：默认值 -->
      <a-form-item label="默认值" name="defaultValue">
        <a-input v-model:value="watchData.defaultValue" placeholder="请输入标准数据默认值"/>
      </a-form-item> 

      <!--选项Enum-->
      <a-form-item label="枚举范围" name="precision">
        <a-select v-model:value="watchData.precision">
          <a-select-option value="staues1">码表1</a-select-option>
          <a-select-option value="staues2">码表2</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 新表单项：默认值 -->
      <a-form-item label="默认值" name="defaultValue">
        <a-input v-model:value="watchData.defaultValue" placeholder="请输入标准数据默认值"/>
      </a-form-item> 

      <!--选项String-->
      <a-form-item label="数据长度" name="long">
        <a-input v-model:value="watchData.long" placeholder="请输入标准数据最大长度"/>
      </a-form-item>
      <a-form-item label="默认值" name="defaultValue">
        <a-input v-model:value="watchData.defaultValue" placeholder="请输入标准数据默认值"/>
      </a-form-item>

注意：属性绑定可省略可自行修改

如果像这样添加到表单当中会全部显示到整个modal当中，但是这并不是所要的效果，我们所希望的是点击任何一个属性值能够显示出新增的表单，就如效果图所示

3.添加绑定点击事件

@change="handleChange"

<a-select v-model:value="watchData.dataType" @change="handleChange">
            <a-select-option value="status1">Int</a-select-option>
            <a-select-option value="status2">Float</a-select-option>
            <a-select-option value="status3">Enum</a-select-option>
            <a-select-option value="status4">String</a-select-option>
        </a-select>

4.通过v-if 指令有条件的渲染

添加v-if="showExtraForm1"到新增的表单中，后面以此类推（注意：v-if绑定的showExtraForm名不同）

例如Int：

<!-- 选项Int -->
      <a-form-item v-if="showExtraForm1" label="取值范围" name="">
        <a-input-number v-model:value="watchData.min" :max="watchData.max" placeholder="请输入标准数据最小值"/>
        <span>-</span>
        <a-input-number v-model:value="watchData.max" :min="watchData.min" placeholder="请输入标准数据最大值"/>
      </a-form-item>
      <!-- 新表单项：默认值 -->
      <a-form-item v-if="showExtraForm1" label="默认值" name="defaultValue">
        <a-input v-model:value="watchData.defaultValue" placeholder="请输入标准数据默认值"/>
      </a-form-item>

5.补充点击事件handleChange和v-uf渲染逻辑

5.1给新增的各个a-form-item中的v-if渲染设立一个初始值为false

const showExtraForm1 = ref(false);
const showExtraForm2 = ref(false);
const showExtraForm3 = ref(false);
const showExtraForm4 = ref(false);

5.2完善点击事件handleChange的逻辑

false为该表单的渲染失效，true为表单的渲染成功

const handleChange = (value) => {
  // 根据选择的数据类型来设置相应的额外表单项状态
  if (value === 'status1') {
    showExtraForm1.value = true;
    showExtraForm2.value = false;
    showExtraForm3.value = false;
    showExtraForm4.value = false;
    // 设置其他额外表单项状态...
  } else if (value === 'status2') {
    showExtraForm1.value = false;
    showExtraForm2.value = true;
    showExtraForm3.value = false;
    showExtraForm4.value = false;
    // 设置其他额外表单项状态...
  } else if (value === 'status3') {
    // 如果选择状态三，则显示状态三对应的额外表单项，隐藏其他额外表单项
    showExtraForm1.value = false;
    showExtraForm2.value = false;
    showExtraForm3.value = true;
    showExtraForm4.value = false;
    // 设置其他额外表单项状态...
  } else if (value === 'status4') {
    // 如果选择状态四，则显示状态四对应的额外表单项，隐藏其他额外表单项
    showExtraForm1.value = false;
    showExtraForm2.value = false;
    showExtraForm3.value = false;
    showExtraForm4.value = true;
    // 设置其他额外表单项状态...
  }
};

注意：每个showExtraForm应该根据所要的点击效果绑定的表单一一对应，status为a-select-item对应的value