vue3+Element Plus 自定义表格单选 多选

标签：false 自定义 image value Element content 单选 isRight tableData

项目背景：用vue3+element plus 做一套考试系统

功能场景：添加试题中分为客观题、主观题两种类型，在客观题会出现单选题、多选题两种类型就会导致单选题只能勾选一个答案、多选题能勾选多个答案。

效果图

---

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="YEvEO04H-1721011925648" src="https://live.csdn.net/v/embed/409503"></iframe>

废话不说直接上代码

<el-button class="btn" icon="Plus" plain style="width: 100px;height: 29px;margin-bottom: 10px"
                       type="primary" @click="handleAdd">
              添加选项
            </el-button>
            <el-table ref="tableHeader" :data="tableData" border row-key="id">
              <el-table-column :index="indexMethod" align="center" label="序号" type="index" width="100"/>
              <el-table-column align="center" label="是否答案" prop="isRight" width="100">
                <template #default="scope">
                  <el-checkbox v-if="form.type==1||form.type==3" v-model="scope.row.isRight" label="答案" size="large"
                               @change="change(scope.row.isRight,scope.$index)"/>
                  <el-checkbox v-else v-model="scope.row.isRight" label="答案" size="large"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="选项图片" width="160">
                <template #default="scope">
                  <el-upload
                      :before-upload="beforeAvatarUpload"
                      :on-success="handleAvatarSuccess"
                      :show-file-list="false"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      class="avatar-uploader"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                    <el-icon v-else class="avatar-uploader-icon">
                      <Plus/>
                    </el-icon>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column align="center" label="选项内容" prop="concat" width="1150">
                <template #default="scope">
                  <el-input
                      v-model="scope.row.concat"
                      :rows="2"
                      placeholder="输入选项内容"
                      type="textarea"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template #default="scope">
                  <el-button circle icon="Delete" type="danger" @click="handleDel(scope.$index)"></el-button>
                </template>
              </el-table-column>
            </el-table>

const handleChange = (el) => {
  tableData.value.length = 0
  if (el == 1) {
    tableData.value.push({content: '', image: '', isRight: false}, {
      content: '',
      image: '',
      isRight: false
    }, {content: '', image: '', isRight: false})
  } else if (el == 2) {
    tableData.value.push({content: '', image: '', isRight: false}, {
      content: '',
      image: '',
      isRight: false
    }, {content: '', image: '', isRight: false}, {content: '', image: '', isRight: false})
  } else if (el == 3) {
    tableData.value.push({content: '', image: '', isRight: false}, {content: '', image: '', isRight: false})
  }
}

const change = (el, index) => {
  tableData.value.forEach((item, key) => {
    if (key != index) {
      item.isRight = false
    }
  })
}
const handleAdd = () => {
  tableData.value.push({content: '', image: '', isRight: false})
}
const handleDel = (id) => {
  tableData.value.splice(id, 1)
}

创造不易  辛苦三联~

标签：false,自定义,image,value,Element,content,单选,isRight,tableData
From： https://blog.csdn.net/Zxk912/article/details/140431256