The implementation code of changing the check box in the header to text in the element with selection table

Time:2021-4-17

Method 1: use the table attribute: 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: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-02',
          Name: 'Wang Xiaohu',
          Address: 'Lane 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;
}

/The function of deep /: if you use other people’s components or develop a component yourself, sometimes you modify one part of it, which may affect other parts. At this time, either you do not use other people’s components and encapsulate one by yourself, but it is not very realistic in many cases, so you need to use / deep /, which will not affect other parts, but also modify the current style of sub components .

Method 2: use the table column title 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 and 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 CSS style directly

.el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
.el-table__header .el-table-column--selection .cell:before {
  Content: "select";
}

summary

Here is the article about changing the check box in the header of the element with selection table into text. For more related selection tables, change the check box in the header into text content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Springboot quick start – Part 3 Notes / processes / dependencies

1: Spring bootapplication annotation brief introduction There is a very important annotation on the startup class, which is the spring boot application annotation. Understanding it is very helpful to understand the startup process of spring boot.You can check the source code of springbootapplication. There are many annotations, the most important of which are:1: @ configuration, […]