Vue动态增添表单并赋予增删上下移动等操作

Vue动态增添表单并赋予增删上下移动等操作

开发需求：前端设计一个表单，依据题目类型，判断是否需要添加内容，若需添加，则可以动态增删、上下移动调整顺序等

开发难点：需根据实际逻辑（如：第一项内容不可删除、上移等），注意按钮的禁用

开发效果：

具体实现：

<!--弹窗:修改问卷题目-->
    <el-dialog
      title="修改问卷题目"
      :visible.sync="dialogModifyQuestionnaire"
      center
    >
      <el-form
        ref="modifyForm"
        :model="modifyForm"
        label-width="80px"
        :label-position="modifyForm.labelPosition"
      >
        <el-form-item label="题目名称">
          <el-input v-model="modifyForm.name"></el-input>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="modifyForm.value" placeholder="请选择题目类型">
            <el-option
              v-for="item in modifyForm.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="modifyForm.score"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="modifyForm.description"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <!--若是单选或多选添加新选项功能-->
        <el-form
          v-show="modifyForm.value != '问答'"
          :inline="true"
          ref="addNewOptionForm"
          :model="addNewOptionForm"
          :label-position="addNewOptionForm.labelPosition"
        >
          <div v-for="(item, index) in addNewOptionForm.dynamicItem" :key="index">
            <el-form-item :label="('选项内容' + (index+1))">
              <el-input
                v-model="item.content"
                placeholder="请输入选项内容"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="item.weight"
                placeholder="得分权重"
              ></el-input>
            </el-form-item>
            <el-button type="danger" :disabled="(index==0)" @click="deleteItem(item, index)">删除</el-button>
            <el-button icon="el-icon-top" :disabled="(index==0)" @click="upItem(index)" circle></el-button>
            <el-button icon="el-icon-bottom" :disabled="(index==addNewOptionForm.dynamicItem.length-1)" @click="downItem(index)" circle></el-button>
            <br />
            <el-button icon="el-icon-plus" v-if="((index+1) == addNewOptionForm.dynamicItem.length)" @click="addItem"></el-button>
          </div>
        </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          style="position: absolute; right: 100px; bottom: 10px"
          @click="dialogModifyQuestionnaire = false"
          >关闭</el-button
        >
        <el-button
          type="primary"
          style="position: absolute; right: 10px; bottom: 10px"
          @click="submitModifyQuestionnaire"
          >保存</el-button
        >
      </div>
    </el-dialog>

export default {
  name: "index",
  data() {
      dialogModifyQuestionnaire: false,
      // 修改问卷表格
      modifyForm: {
        labelPosition: "left",
        name: "",
        // 默认
        value: "问答",
        options: [
          { value: "单选", label: "单选" },
          { value: "多选", label: "多选" },
          { value: "问答", label: "问答" },
        ],
        score: "",
        description: "",
      },
      // 新增选项表格
      addNewOptionForm: {
        labelPosition: "left",
        dynamicItem: [
          {
            content: "",
            weight: ""
          }
        ]
      },
    };
  },
  methods: {
    // 提交修改操作
    submitModifyQuestionnaire() {
      this.$message({
        message: "恭喜你,修改问卷成功~",
        type: "success",
      });
      this.dialogModifyQuestionnaire = false;
    },
    // 添加选项内容
    addItem() {
      this.addNewOptionForm.dynamicItem.push({
        content: "",
        weight: ""
      })
    },
    // 删除选项内容
    deleteItem(item, index) {
      this.addNewOptionForm.dynamicItem.splice(index, 1)
      this.$message({
        message: "删除成功哟~",
        type: "success",
      })
    },
    // 上移动选项操作
    upItem(index) {
      let arr = this.addNewOptionForm.dynamicItem
      arr.splice(index-1, 1, ...arr.splice(index, 1, arr[index-1]))
    },
    // 下移选项操作
    downItem(index) {
      let arr = this.addNewOptionForm.dynamicItem
      arr.splice(index, 1, ...arr.splice(index+1, 1, arr[index]))
    }
  },
};