elementPlus el-table 的selection 全选框设置成文字“全选“,并且添加文字点击事件

 原本以为直接使用插槽可以,但是行不通

  这是elementPlus el-table 的selection 自己带的默认样式

然后我们的需求是这样子的

  先来将一下思路

复选框变成文字只能从样式下手

不多说,上代码....

 <el-table ref="table" :header-cell-class-name="cellClass" >

  const cellClass = (row) =>{

  if(row.columnIndex === 0){

    return 'addAllSelectClass'
  }
  

}

//去除复选框头部
::v-deep .el-table__header-wrapper{
  .el-checkbox__inner{
      display: none;
  }
  }


//添加全选样式
::v-deep .el-table .addAllSelectClass .cell::before{
  content: '全选';
  text-align: center;
  margin-left: 5px;
  /** 文本1 */
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
line-height: 23.17px;
color: rgba(128, 128, 128, 1);


}

样式就出来啦~~~~

那我们的需求还有要点击全选

查看elementPlus官方文档,我们知道有两个属性可以让我添加点击事件

 

那接下来我们就来添加给表格

const table =ref(null)

<el-table ref="table"  :header-cell-class-name="cellClass" @header-click="cellClick">

const cellClick = (rows) =>{
  if(rows.no === 0&&rows){
    table.value.toggleAllSelection()
  }
}

当当当~~~就酱啦----