vue可以新增、删除动态表单封装

最新推荐文章于 2024-05-05 01:06:07 发布

Y丶小琪

最新推荐文章于 2024-05-05 01:06:07 发布

阅读量1.1k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_33168578/article/details/123829756

版权

本文介绍了一种基于Vue的动态表单组件实现方案，该组件支持在表单中动态增加和删除表单项，适用于需要灵活调整表单结构的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以动态增加、删除的表单

<template>
  <div class="dynamic">
    <div v-for="(item, index) in formList" :key="index" class="item">
      <slot :form="formList[index]" />
      <span class="icon-wrap"><i v-if="!disabled && formList.length > 1" class="el-icon-delete icon" style="color:red;" @click="deleteItem(item, index)" /></span>
    </div>
    <div v-if="!disabled" class="add-item">
      <el-button type="primary" @click="addItem">增加</el-button>
    </div>

  </div>

</template>

<script>
export default {
  name: 'Dynamic',
  props: {
    singleData: {
      type: [String, Object],
      default: ''
    },
    dataList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formList: []
    }
  },
  watch: {
    dataList: {
      handler(newVal, oldName) {
        this.formList = newVal
      },
      immediate: true
    }
  },
  mounted() {
    console.log(this.singleData)
  },

  methods: {
    addItem() {
      const data = Object.assign({}, this.singleData)
      this.formList.push(data)
    },
    deleteItem(item, index) {
      this.formList.splice(index, 1)
    }
  }
}

</script>

使用：

<el-form ref="form" :rules="rules" :model="userForm" :inline="true" label-width="150px">
      <Dynamic v-slot:default="slotProps" :data-list="userForm.model_list" :single-data="getModelData()">
        <el-form-item label="model_id:" prop="model_id">
          <el-select
            v-model="slotProps.form.model_id"
            :disabled="disabled"
            placeholder="请选择"
            @change="slotProps.form.version_list = ''; getModelVersionList(slotProps.form.model_id)"
          >
            <el-option
              v-for="item in modelList"
              :key="item.model_id"
              :label="item.model_id"
              :value="item.model_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="version" prop="version">
          <el-select v-model="slotProps.form.version_list" multiple :disabled="disabled" placeholder="请选择">
            <el-option
              v-for="item in versionList"
              :key="item.version"
              :label="item.version"
              :value="item.version"
            />
          </el-select>
        </el-form-item>
      </Dynamic>
</el-form>

data里面定义动态表单的数据：

 userForm: {
        type: true,
        model_list: [this.getModelData()],
  },

获取数据(直接从表单中拿)：

const { model_list } = this.userForm