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?
Table of contents 1. v-on directive 1. Basic usag...
Moreover, an article website built with a blog pro...
IMG tag basic analysis In HTML5, the img tag has ...
Preface After the project is migrated to .net cor...
Table of contents 1. Knowledge description of the...
Today I saw a little trick for HTML text escaping ...
We use the translate parameter to achieve movemen...
(1) HTML: HyperText Markup Language, which mainly...
Table of contents Preface Rationale Procedure 1. ...
1. Docker pulls the image docker pull mysql (pull...
Table of contents Image capture through svg CSS p...
Recently, the company is preparing to develop an ...
UCenter Home is an SNS website building system rel...
Record the installation and configuration method ...
This article records the installation tutorial of...