element带选择表格将表头复选框改成文字的方法

这篇文章主要介绍了element带选择表格将表头复选框改成文字的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

方法一：使用表格属性：header-cell-class-name 表格界面代码

<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="日期"      width="120">      <template slot-scope="scope">{{ scope.row.date }}</template>    </el-table-column>    <el-table-column      prop="name"      label="姓名"      width="120">    </el-table-column>    <el-table-column      prop="address"      label="地址"      >    </el-table-column>  </el-table>

对应js

data() {      return {        tableData: [{          date: '2016-05-03',          name: '王小虎',          address: '上海市普陀区金沙江路 1518 弄'        }, {          date: '2016-05-02',          name: '王小虎',          address: '上海市普陀区金沙江路 1518 弄'        }],        multipleSelection: []      }    },    methods: {      cellclass(row){        if(row.columnIndex===0){          return 'DisabledSelection'        }      }    }

对应CSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{  display:none;  position:relative;}.el-table /deep/.DisabledSelection .cell:before{  content:"选择";  position:absolute;  right 11px;}

/deep/的作用：如果你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要使用/deep/，既不影响到别的地方，又能修改子组件在当前的样式。

方法二、使用表格列属性：label-class-name

界面代码

<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="日期"      width="120">      <template slot-scope="scope">{{ scope.row.date }}</template>    </el-table-column>    <el-table-column      prop="name"      label="姓名"      width="120">    </el-table-column>    <el-table-column      prop="address"      label="地址"      show-overflow-tooltip>    </el-table-column>  </el-table>

对应CSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{  display:none;  position:relative;}.el-table /deep/.DisabledSelection .cell:before{  content:"选择";  position:absolute;  right 11px;}

方法三：使用document.querySelector() 界面代码

<el-table    ref="multipleTable"    :data="tableData"    style="width: 100%"    @selection-change="handleSelectionChange">    <el-table-column      type="selection">    </el-table-column>    <el-table-column      label="日期"      width="120">      <template slot-scope="scope">{{ scope.row.date }}</template>    </el-table-column>    <el-table-column      prop="name"      label="姓名"      width="120">    </el-table-column>    <el-table-column      prop="address"      label="地址"      show-overflow-tooltip>    </el-table-column>  </el-table>

对应js

mounted(){  this.$nextTick(()=>{    this.init();  })},methods: {  init(){  document.querySelector(".el-checkbox__inner").style.display="none";  document.querySelector(".cell").innerHTML = '选择'            }}

方法四：不使用selection选择列，重写列使用checkbox

<el-table      :data="tableData"      style="width: 100%">      <el-table-column        prop="date"        label="选择"        width="50">        <template slot-scope="scope">          <el-checkbox></el-checkbox></template>      </el-table-column>      <el-table-column        prop="name"        label="姓名"        width="180">      </el-table-column>      <el-table-column        prop="address"        label="地址">      </el-table-column>    </el-table>

方法五：直接通过CSS样式修改

.el-table__header .el-table-column--selection .cell .el-checkbox {  display:none}.el-table__header .el-table-column--selection .cell:before {  content: "选择";}

感谢你能够认真阅读完这篇文章，希望小编分享的“element带选择表格将表头复选框改成文字的方法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!