方法一：使用表格属性：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带选择表格将表头的复选框改成文字的文章就介绍到这了,更多相关选择表格将表头的复选框改成文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
打开一个视频，在点击播放之前会看到一张封面图，点击之后封面消失，随即播放视...
Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0...
CSS背景: background:#00ffee; //设置背景颜色 background-image:url(*.jpg); //...
1.HTML5获取当前地理位置 HTML5 Geolocation API（地理位置应用程序接口）可以获...
先点赞再看，养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
Dreamweaver是前端开发常用的软件，有些小站长可能也经常用。有些人还不知道Drea...
今天在用百度页面做练习的时候突然发现，尽管设置了搜索框和button的margin值和p...
方法一： 请将下面代码，加在/html之后 复制代码 代码如下: !--[if IE 6] script...
Dreamweaver中的css选择器是定义css规则首选需要选择的，css选择器主要有：类\id...
一、Flex 布局简介 Flex 是 Flexible Box 的缩写，意为弹性布局，用来为盒状模型...
