Element with selection table to change the check box in the header into text implementation code

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

Vue basic instructions example graphic explanation

Table of contents 1. v-on directive 1. Basic usag...

Getting Started Tutorial for Beginners ⑨: How to Build a Portal Website

Moreover, an article website built with a blog pro...

Detailed explanation of the spacing problem between img tags

IMG tag basic analysis In HTML5, the img tag has ...

Using System.Drawing.Common in Linux/Docker

Preface After the project is migrated to .net cor...

MySQL Series Database Design Three Paradigm Tutorial Examples

Table of contents 1. Knowledge description of the...

HTML text escape tips

Today I saw a little trick for HTML text escaping ...

Example of implementing translation effect (transfrom: translate) with CSS3

We use the translate parameter to achieve movemen...

Html and CSS Basics (Must Read)

(1) HTML: HyperText Markup Language, which mainly...

Vue implements irregular screenshots

Table of contents Image capture through svg CSS p...

How to use uni-app to display buttons and search boxes in the top navigation bar

Recently, the company is preparing to develop an ...

UCenter Home site adds statistics code

UCenter Home is an SNS website building system rel...

MySQL 8.0.12 installation and configuration method graphic tutorial

Record the installation and configuration method ...

MySQL 8.0.11 Installation Tutorial under Windows

This article records the installation tutorial of...