Vue+Element-UI Table表格实现复选框单选效果(隐藏表头上的全选Checkbox)

实现效果

完整代码

html 复制代码
<div class="box-pos">
      <el-table ref="table" 
           :header-cell-style="{ color: '#FFF', background: '#333' }"
           :cell-style="{ color: '#FFF', background: '#333' }" 
           :data="grListData" style="width: 100%"
           @selection-change="selectionChange">
          <template slot="empty">
             <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
          </template>
          <el-table-column type="selection" width="50" />
          <el-table-column prop="plantCode" label="厂区" />
          <el-table-column prop="grCode" label="单据号" />
          <el-table-column prop="grItem" label="单据行" />
          <el-table-column prop="grDate" label="单据日期" />
          <el-table-column prop="materialCode" label="料号" />
          //........
     </el-table>
</div>

js代码

javascript 复制代码
  data() {
        return {
            multipleSelection: [],
        };
    },
  methods: {
        selectionChange(data) {
            this.multipleSelection = []
            if (data.length > 1) {
                this.$refs.table.clearSelection()
                this.$refs.table.toggleRowSelection(data[data.length - 1])
            }
            this.multipleSelection = data[data.length - 1] ? [data[data.length - 1]] : []
        },
 }

隐藏表头上的全选Checkbox

css 复制代码
.box-pos {
    /**找到表头那一行,然后把里面的复选框隐藏掉**/
    ::v-deep .el-table__header-wrapper .el-checkbox {
        display: none !important;
    }

}

参考链接:https://blog.csdn.net/a772116804/article/details/131899825

相关推荐
我是华为OD~HR~栗栗呀6 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试
詩句☾⋆᭄南笙6 小时前
CSS美化网页元素
前端·css·html
陈随易6 小时前
不使用 Husky 和 Lint-staged,实现 Git 提交前自动格式化代码
前端·后端·程序员
范特东南西北风6 小时前
roocode + vscode + api_key = free GPT-5
前端·ai编程
golang学习记6 小时前
从0死磕全栈之Next.js 缓存与数据重新验证
前端
BraveAriesZyc6 小时前
axios的使用
前端
没有鸡汤吃不下饭6 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
云枫晖6 小时前
JS核心知识-模块化
前端·javascript
Asort6 小时前
JavaScript设计模式(十五)——解释器模式 (Interpreter)
前端·javascript·设计模式
Java陈序员6 小时前
宝藏工具站!一个轻量实用的在线工具集合!
vue.js·nuxt.js