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
How to install setup.py program in linux
First execute the command: [root@mini61 setuptool...
Detailed description of shallow copy and deep copy in js
Table of contents 1. js memory 2. Assignment 3. S...
A brief analysis of SQL examples for finding uncommitted transactions in MySQL
A long time ago, I summarized a blog post titled ...
How to implement data persistence using the vuex third-party package
Purpose: Allow the state data managed in vuex to ...
Comparing Node.js and Deno
Table of contents Preface What is Deno? Compariso...
Test and solution for MySQL's large memory usage and high CPU usage
After the changes: innodb_buffer_pool_size=576M -...
Two ways to exit bash in docker container under Linux
If you want to exit bash, there are two options: ...
Understanding and solutions of 1px line in mobile development
Reasons why the 1px line becomes thicker When wor...
Vue uses canvas to realize image compression upload
This article shares the specific code of Vue usin...
Detailed explanation of how to configure multi-threaded master-slave replication from MySQL 5.7 slave nodes
Preface MySQL supports multi-threaded replication...
Introduction to the functions and usage of value and name attributes in Html
1. The value used in the button refers to the text...
Linux super detailed gcc upgrade process
Table of contents Preface 1. Current gcc version ...
The difference and usage of datetime and timestamp in MySQL
1. How to represent the current time in MySQL? In...
WeChat applet example of using functions directly in {{ }}
Preface In WeChat applet development (native wxml...
Mysql 5.6.37 winx64 installation dual version mysql notes
If MySQL version 5.0 already exists on the machin...