Element with selection table to change the check box in the header into text implementation code
|
Method 1: Use table attributes: header-cell-class-name Table 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="Date"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="Address"
>
</el-table-column>
</el-table>Corresponding js data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Wang Xiaohu',
address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
}, {
date: '2016-05-02',
name: 'Wang Xiaohu',
address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
}],
multipleSelection: []
}
},
methods: {
cellclass(row){
if(row.columnIndex===0){
return 'DisabledSelection'
}
}
}Corresponding CSS .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"select";
position:absolute;
right 11px;
}Function of /deep/: If you use someone else's component or develop a component yourself, sometimes your modification of one place may affect other places. At this time, you either do not use other people's components and repackage them yourself, but this is often not realistic. Therefore, you need to use /deep/, which will not affect other places and can modify the current style of the subcomponent. Method 2: Use table column header attribute: 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="Date"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="Address"
show-overflow-tooltip>
</el-table-column>
</el-table>Corresponding CSS .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
display:none;
position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
content:"select";
position:absolute;
right 11px;
}Method 3: 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="Date"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="Address"
show-overflow-tooltip>
</el-table-column>
</el-table>Corresponding js mounted(){
this.$nextTick(()=>{
this.init();
})
},
methods: {
init(){
document.querySelector(".el-checkbox__inner").style.display="none";
document.querySelector(".cell").innerHTML = 'Select'
}
}
Method 4: Do not use selection to select columns, rewrite columns to use checkbox <el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="Select"
width="50">
<template slot-scope="scope">
<el-checkbox></el-checkbox></template>
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>Method 5: Modify directly through CSS style .el-table__header .el-table-column--selection .cell .el-checkbox {
display:none
}
.el-table__header .el-table-column--selection .cell:before {
content: "select";
}Summarize This is the end of this article about how to change the checkbox in the header of an element with selection table into text. For more related information about how to change the checkbox in the header of an element with selection table into text, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Share 20 excellent web form design cases
>>: How can the front end better display the 100,000 pieces of data returned by the back end?
Recommend
HTML drag and drop function implementation code
Based on Vue The core idea of this function is ...
Web2.0: Causes and Solutions of Information Overload
<br />Information duplication, information o...
Modify file permissions (ownership) under Linux
Linux and Unix are multi-user operating systems, ...
MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control
Table of contents 1. Concurrent access control 2....
Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout
When setting display:flex, justify-content: space...
Use thead, tfoot, and tbody to create a table
Some people use these three tags in a perverted wa...
MySQL password contains special characters & operation of logging in from command line
On the server, in order to quickly log in to the ...
Detailed explanation of eight methods to achieve CSS page bottom fixed
When we are writing a page, we often encounter a ...
A brief discussion on event-driven development in JS and Nodejs
Table of contents Event-driven and publish-subscr...
Vue backend management system implementation of paging function example
This article mainly introduces the implementation...
Implement a simple data response system
Table of contents 1. Dep 2. Understand obverser 3...
Detailed explanation of basic interaction of javascript
Table of contents 1. How to obtain elements Get i...
A brief discussion on two current limiting methods in Nginx
The load is generally estimated during system des...
Detailed explanation of compiling and installing MySQL 5.6 on CentOS and installing multiple MySQL instances
--1. Create a new group and user for mysql # user...
How to implement nested if method in nginx
Nginx does not support nested if statements, nor ...