本文 Element-ui 版本 2.x
需求
如下图所示，需要给多选表格添加‘全选’修饰语。
方法
在 el-table-column 中设置 label 属性并不起作用，因此 ‘全选’ 二字需使用 CSS 来实现。
示例完整代码如下：
<template>
<div class="test">
<el-table
ref="multipleTable"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
size="mini"
border
stripe
style="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中的写法，为了将 伪类 和 伪元素 区分开，但平时为了兼容性，还是会用一个冒号的写法；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141342.html
