Implement list addition with vue+Element plus

 need:

1. Page initialization, display question stem, add button, and question list box

2. Option operation, at most 5, at least 1. The add button is displayed on the last item, when there are 5 options, the add button is not displayed, and when there is 1 option, the delete button is not displayed

3. The correct answer is shown in red

4. A delete button is displayed in the lower right corner to delete the topic

<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>

The renderings are as follows: