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>
相关推荐
chxii2 分钟前
前后端分离
前端
Nan_Shu_61432 分钟前
学习:JavaScript(1)
开发语言·javascript·学习·ecmascript
青衫码上行35 分钟前
【Java Web学习 | 第三篇】CSS(2) - 元素显示模式
java·前端·学习
木木子999943 分钟前
Next.js, Node.js, JavaScript, TypeScript 的关系
javascript·typescript·node.js
IT_陈寒43 分钟前
Redis性能翻倍的5个冷门技巧,90%的开发者都不知道第3个!
前端·人工智能·后端
柑橘乌云_1 小时前
学习记录-package.json的scripts添加参数的方式有那些
前端·学习·node.js·json
清沫1 小时前
规训 AI Agent 实践
前端·ai编程·cursor
明仔的阳光午后2 小时前
React 入门 02:从单页面应用到多页面应用
前端·react.js·前端框架
.生产的驴2 小时前
React 页面路由ReactRouter 路由跳转 参数传递 路由配置 嵌套路由
前端·javascript·react.js·前端框架·json·ecmascript·html5
非凡ghost2 小时前
批量转双层PDF(可识别各种语言) 中文绿色版
前端·windows·pdf·计算机外设·软件需求