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

相关推荐
Coffeeee5 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
用户34216749055210 分钟前
Java高手速成--吃透源码+手写组件+定制开发教程
前端·深度学习
却尘12 分钟前
当你敲下 `pnpm run dev`,这台机器到底在背后干了什么?
前端·javascript·面试
歪歪10012 分钟前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
却尘15 分钟前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
北辰alk20 分钟前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端
葡萄城技术团队31 分钟前
SpreadJS ReportSheet 与 DataManager 实现 Token 鉴权:全流程详解与代码解析
前端
勤劳打代码31 分钟前
触类旁通 —— Flutter 与 React 对比解析
前端·flutter·react native
Mintopia31 分钟前
🧠 可解释性AIGC:Web场景下模型决策透明化的技术路径
前端·javascript·aigc
Mintopia34 分钟前
⚙️ Next.js 事务与批量操作:让异步的世界井然有序
前端·javascript·全栈