方法一：使用表格属性：header-cell-class-name 表格界面代码
<el-table
ref="multipleTable"
:data="tableData"
:header-cell-class-name="cellclass"
style="width: 100%">
<el-table-column
type="selection">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
>
</el-table-column>
</el-table>
对应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
界面代码
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column label-class-name="DisabledSelection"
type="selection">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
对应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() 界面代码
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
对应js
mounted(){
this.$nextTick(()=>{
this.init();
})
},
methods: {
init(){
document.querySelector(".el-checkbox__inner").style.display="none";
document.querySelector(".cell").innerHTML = '选择'
}
}
方法四：不使用selection选择列，重写列使用checkbox
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="选择"
width="50">
<template slot-scope="scope">
<el-checkbox></el-checkbox></template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
方法五：直接通过CSS样式修改
.el-table__header .el-table-column--selection .cell .el-checkbox {
display:none
}
.el-table__header .el-table-column--selection .cell:before {
content: "选择";
}
总结
到此这篇关于element带选择表格将表头的复选框改成文字的文章就介绍到这了,更多相关选择表格将表头的复选框改成文字内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
