实现el-table两列多选框且不可同时勾选

1、效果图如下,功能:必修和选修不可同时勾选

2、代码如下

bash 复制代码
<template>
      <el-table :data="addTableData" style="width: 100%">
        <el-table-column label="必修" width="55px" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="checked1" :label="scope.row.id" @change="checkboxChange($event,scope.row.id,'checked2')"><span></span></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="选修" width="55px" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="checked2" :label="scope.row.id" @change="checkboxChange($event,scope.row.id,'checked1')"><span></span></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="编号" width="60px" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="name" label="学时" width="60px"  align="center"></el-table-column>
      </el-table>
</template>


  export default {
    data() {
      return {
        checked1:[],//必修已选
        checked2:[],//选修已选
      }
    }

    methods: {
      checkboxChange(val,id,type) {
        if(val === true) {
          this[type] = this[type].filter(function(item) {
            return item !== id;  // 过滤出值不为2的元素
          });
        }
      },
    },
  }
相关推荐
_Legend_King10 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
J总裁的小芒果11 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
ZwaterZ1 天前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六1 天前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保1 天前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~1 天前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
大霞上仙1 天前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛1 天前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
白臻2 天前
使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题
前端·vue.js·elementui
吃葡萄不吐葡萄皮嘻嘻2 天前
el-table实现最后一行合计功能并合并指定单元格
前端·vue.js·elementui