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>
相关推荐
XiaoYu20024 小时前
第10章 SSE魔改
前端·webassembly
沙子迷了蜗牛眼4 小时前
当展示列表使用 URL.createObjectURL 的创建临时图片、视频无法加载问题
java·前端·javascript·vue.js
爬山算法4 小时前
Hibernate(30)Hibernate的Named Query是什么?
服务器·前端·hibernate
加油乐4 小时前
react路由配置相关
前端·react.js·ant design
Hi_kenyon4 小时前
VUE3套用组件库快速开发(以Element Plus为例)三
前端·javascript·vue.js
AC赳赳老秦4 小时前
Shell 脚本批量生成:DeepSeek 辅助编写服务器运维自动化指令
运维·服务器·前端·vue.js·数据分析·自动化·deepseek
J总裁的小芒果4 小时前
原生Table写一行保证两条数据
javascript·vue.js·elementui
Anarkh_Lee4 小时前
别再手写 conf 了!NgxFlow:基于 React Flow 的 Nginx 可视化与调试神器
前端·nginx·数据可视化
程序员Agions4 小时前
程序员邪修手册:那些不能写进文档的骚操作
前端·后端·代码规范
jqq6664 小时前
解析ElementPlus打包源码(五、copyFiles)
前端·javascript·vue.js