ElementUI表格表头自定义添加checkbox,点击选中样式不生效

场景:需要自定义table的多选效果,不用其自带的,采用官方文档此处(如图)的处理过程,并把全选控件嵌入table的表头,el-checkbox在table表头勾选样式不生效。

具体用法,点击全选,样式没有变化

javascript 复制代码
<el-table-column align="center" prop="enable" width="55">
  <template slot="header" >
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
  </template>
  <template slot-scope="scope">
    <el-checkbox v-model="scope.row.enable" true-label="1" false-label="0"
      @change="handleCheckboxChange(scope.row)"></el-checkbox>
  </template>
</el-table-column>

改进方法加入slot-scope="scope",改进后:

javascript 复制代码
<template slot="header" slot-scope="scope">
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
</template>
相关推荐
web像素之境2 分钟前
前端工程化梳理
前端
小林ixn5 分钟前
全栈项目实战:前端独立开发,不再傻等后端接口
前端·javascript·react.js
李剑一5 分钟前
Anthropic将在AI生成文本中嵌入水印!难道是用我之前写的这个技术?
前端·aigc·ai编程
Asize11 分钟前
前端接口工程:axios + mock,前端不再傻等后端
前端·javascript
结网的兔子12 分钟前
【前端开发】UniApp 项目地图选型与Web-APP跨端迁移方案
前端·uni-app
张元清12 分钟前
React useElementSize Hook:用 ResizeObserver 实时追踪元素宽高 (2026)
javascript·react.js
Canace16 分钟前
给 Claude 一个链接,它真的读了原文吗
前端·人工智能·ai编程
爱丶不疚17 分钟前
Electron net 模块你可以没用过,但不能不知道
前端·electron
cidy_9817 分钟前
React + Ant Design 通用企业数据统计模块实战
前端
渣波21 分钟前
React 性能优化与状态管理双雄:useMemo 与 useReducer 深度解析
前端·javascript