Element-ui中实现多选表格（Table）增加 ‘全选’ 字样

本文 Element-ui 版本 2.x

需求

如下图所示，需要给多选表格添加‘全选’修饰语。

方法

在 el-table-column 中设置 label 属性并不起作用，因此 ‘全选’ 二字需使用 CSS 来实现。
示例完整代码如下：

<template><div class="test"><el-tableref="multipleTable":data="tableData":header-cell-style="{background:'#eef1f6',color:'#606266'}"size="mini"borderstripestyle="width: 50%"@selection-change="handleSelectionChange"><el-table-column align="center" type="selection" width="80"></el-table-column><el-table-column align="center" label="日期" show-overflow-tooltip><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column align="center" prop="name" label="姓名" show-overflow-tooltip></el-table-column><el-table-column align="center" prop="address" label="地址" width="450"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],multipleSelection: []}},methods: {handleSelectionChange(val) {this.multipleSelection = val;}}
}
</script><style lang="stylus" scoped>
.test{::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox:after {color: #606266;content: "全选";font-size: 12px;margin-left: 2px;font-weight: bold;}
}
</style>

延伸

CSS中 :after 与 ::after 的区别：

都是伪元素，和 :hover :active 等伪类不一样；
:before :after 伪元素是在CSS2中提出来的，所以兼容了 IE8；
::before ::after 是CSS3中的写法，为了将伪类和伪元素区分开，但平时为了兼容性，还是会用一个冒号的写法；

Element-ui中实现多选表格（Table）增加 ‘全选’ 字样相关推荐

使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
ant中table组件全选选中所有行(ant design2.2.8)
如需跳过过程,查看全部代码,请下拉到最后过程: 1.先写一个有数据的table 2.增加rowKey 在table组件中增加rowKey="id" id为你对象数组中每个对象的i ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...

Element-ui中实现多选表格（Table）增加 ‘全选’ 字样

需求

方法

延伸

Element-ui中实现多选表格（Table）增加 ‘全选’ 字样相关推荐

最新文章

热门文章

Element-ui中 实现多选表格（Table）增加 ‘全选’ 字样

需求

方法

延伸

Element-ui中 实现多选表格（Table）增加 ‘全选’ 字样相关推荐

最新文章

热门文章

Element-ui中实现多选表格（Table）增加 ‘全选’ 字样

Element-ui中实现多选表格（Table）增加 ‘全选’ 字样相关推荐