这篇文章主要介绍了element带选择表格将表头复选框改成文字的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都做网站、同心网络推广、微信平台小程序开发、同心网络营销、同心企业策划、同心品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；
创新互联建站为所有大学生创业者提供
同心建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
方法一：使用表格属性：header-cell-class-name 表格界面代码
{{ scope.row.date }}
对应js
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
cellclass(row){
if(row.columnIndex===0){
return 'DisabledSelection'
}
}
}对应CSS
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"选择";
position:absolute;
right 11px;
}/deep/的作用：如果你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要使用/deep/，既不影响到别的地方，又能修改子组件在当前的样式。
方法二、使用表格列标题属性：label-class-name
界面代码
{{ scope.row.date }}
对应CSS
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"选择";
position:absolute;
right 11px;
}方法三：使用document.querySelector() 界面代码
{{ scope.row.date }}
对应js
mounted(){
this.$nextTick(()=>{
this.init();
})
},
methods: {
init(){
document.querySelector(".el-checkbox__inner").style.display="none";
document.querySelector(".cell").innerHTML = '选择'
}
}方法四：不使用selection选择列，重写列使用checkbox
方法五：直接通过CSS样式修改
.el-table__header .el-table-column--selection .cell .el-checkbox {
display:none
}
.el-table__header .el-table-column--selection .cell:before {
content: "选择";
}感谢你能够认真阅读完这篇文章，希望小编分享的“element带选择表格将表头复选框改成文字的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前题目：element带选择表格将表头复选框改成文字的方法-创新互联
本文链接：
http://cdkjz.cn/article/deidgj.html
