vue动态表单及移动

最新推荐文章于 2024-06-13 08:10:56 发布

初心w50t2

最新推荐文章于 2024-06-13 08:10:56 发布

阅读量315

点赞数 1

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41910413/article/details/137150532

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js中创建一个动态表单，包括使用v-for遍历生成可编辑的表单项，以及实现添加、删除和移动功能的JavaScript代码片段。

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

实现一个动态表单，支持新增移动删除
代码如下：

 <el-form
      ref="form"
      :model="grid"
      label-width="60px"
      style="width: 350px"
    >
      <div
        v-for="(item, index) in list"
        :key="item.type + index"
        class="area-config-form"
      >
        <el-form-item label="类型" prop="type">
          <el-select
            v-model="item.type"
            clearable
            :data="typeList"
          ></bs-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="item.title"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="内容"
          prop="content"
        >
          <el-input
            v-model="item.content"
            type="textarea"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-button
            v-if="index !== 0"
            size="mini"
            icon="el-icon-top"
            @click="moveUp(index)"
          ></el-button>
          <el-button
            v-if="index !== list.length - 1"
            size="mini"
            icon="el-icon-bottom"
            @click="moveDown(index)"
          ></el-button>
          <el-button
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(index)"
          ></el-button>
        </div>
      </div>
    </el-form>
    <el-button
      size="small"
      type="primary"
      style="width: 100%"
      :icon="uiSetting.icon.addRow"
      @click="onAdd"
    >
      新增
    </el-button>

js代码：

methods: {
    // 生成新数据
    generateNewData() {
      const data = {
        type: null,
        title: null,
        content: null,
      }
      return data
    },

    // 增加一行
    onAdd() {
      this.list.push(this.generateNewData())
    },

    // 删除当前行
    handleDelete(index) {
      this.$confirm2
        .warning('确定删除当前数据吗？')
        .then(() => {
          this.list.splice(index, 1)
        })
        .catch(() => {})
    },

    // 上移
    moveUp(index) {
      if (index <= 0) return
      const temp = this.list[index]
      this.$set(this.list, index, this.list[index - 1])
      this.$set(this.list, index - 1, temp)
    },

    // 下移
    moveDown(index) {
      if (index >= this.list.length - 1) return
      const temp = this.list[index]
      this.$set(this.list, index, this.list[index + 1])
      this.$set(this.list, index + 1, temp)
    }
  }