The form element header into the text box
Method a: use the table attributes: header-cell-class-name
Form interface code
//表格
<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>
The corresponding 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'
}
}
}
The corresponding 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 / role: If you use someone else's own components or develop a component, sometimes you modify one could affect the other place, at this time or you do not have other people's assembly, himself a re-packaged, but many times it is not realistic, so you need to use / deep /, will not affect the other places, but also to modify sub-assemblies in the current style.
Second method, using the table column header attributes: label-class-name
Interface code
<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>
The corresponding CSS
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"选择";
position:absolute;
right 11px;
}
Method three: Use document.querySelector ()
Interface code
<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>
The corresponding js
mounted(){
this.$nextTick(()=>{
this.init();
})
},
methods: {
init(){
document.querySelector(".el-checkbox__inner").style.display="none";
document.querySelector(".cell").innerHTML = '选择'
}
}
Four: do not use selection to select columns, rewrite use checkbox column
<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>
Method five: by directly modifying the CSS Styles
.el-table__header .el-table-column--selection .cell .el-checkbox {
display:none
}
.el-table__header .el-table-column--selection .cell:before {
content: "选择";
}