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]))
    }
  },
};