vue+Element plusでリスト加算を実装する

必要：

ページの初期化、質問ステムの表示、追加ボタン、質問リストボックス
オプション操作、最大 5、少なくとも 1。最後の項目には追加ボタンが表示され、選択肢が5つの場合は追加ボタンは表示されず、選択肢が1つの場合は削除ボタンは表示されません
正解は赤色で表示されます
トピックを削除するには、右下隅に削除ボタンが表示されます

<template>
  <div class="box">
    <h2 style="text-align: center;">添加选择题</h2>
    <div class="box-data">
      <div>
        <div style="display: inline;">
          <span>题干</span>
          <el-input v-model="input" style="width: 94%;margin: 20px;" placeholder="请输入内容" />
        </div>
        <span>选项</span>
        <div style="margin: 0px 50px 0;" v-for="(item, index) in list" :key="index">
          <div style="margin-top:  10px;">
            <el-checkbox v-model="item.check" label=""  size="small" border />
            <el-input v-model="item.values" style="width: 85%;margin-left: 10px;" placeholder="请输入内容" />
            <el-button type="info" plain circle @click="minus(index)" style="margin-left: 15px;"
              v-if="list.length != 1">-</el-button>
            <el-button type="info" plain circle @click="add()" v-if="index == list.length - 1 && index != 4">+</el-button>
          </div>
        </div>
        <div style="width: 100%;text-align: center;margin-top:50px ;">
          <el-button type="primary" @click="adddata">添加</el-button>
        </div>
      </div>
    </div>
  </div>
  <div class="boxs">
    <h2 style="margin: 20px ;">题目列表</h2>
    <ol>
      <li v-for="(item, index) in listArray" :key="index">
        {
   
   { item.title }}
        <ol type="A">
          <li v-for="(ite, i) in item.content[0]" :key="i" :style="ite.check ? colors : ''">{
   
   { ite.values }}</li>
        </ol>
        <div style="float: right;margin: 20px;">
          <el-button type="primary" @click="deletes(index)">删除</el-button>
        </div>
      </li>
    </ol>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
let listArray = ref([])//内容
const input = ref('')//题目标题名称
const colors = 'color:red;'//动态样式
const list = ref([
  {
    check: false,
    values: ''
  }
])
// 减号
function minus(index: number) {
  if (list.value.length > 1) {
    list.value.splice(index, 1)
  } else {
    return ElMessage.warning('注意喔！最后一个不能减了');
  }
}

// 加号
function add() {
  if (list.value.length != 5) {
    list.value.push({
      check: false,
      values: ''
    })
  } else {
    return ElMessage.warning('注意喔！不能在添加了');
  }
}
// 添加按钮
function adddata() {
  let obj = {
    title: input.value,
    content: [list.value]
  } as any//用一个变量接收输入框中的值
  listArray.value.push(obj)//添加当前我在输入框中的数据
  ElMessage.success('添加成功');
  input.value = ''//当输入框中的值添加到题目列表时清空输入框中的值
  list.value = [
    {
      check: false,
      values: ''
    }
  ]
}
// 删除
function deletes(index: number) {//index下标
  listArray.value.splice(index, 1)//删除当前添加的选项
}

</script>

<style scoped>
.box {
  width: 95%;
  height: 480px;
  margin: auto;
  border: solid #ccc 1px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.box-data {
  width: 95%;
  margin: auto;
}

.boxs {
  width: 95%;
  height: 300px;
  margin: auto;
  border: solid #ccc 1px;
}
</style>

レンダリングは次のとおりです。

vue+Element plusでリスト加算を実装する

おすすめ