element table怎么去掉全选的checkbox框换成汉字

Question

element-ui 的table多选怎么把全选功能的checkbox换成汉字
现在这样

想改成

Answer 1

我的解决方法与楼上回答的一样，都是把checkbox框隐藏，然后用定位把文字放上去.

---

1. 使用header-cell-class-name 给表头单元格设置一个className用于修改样式：

---

---

2.

---

效果如下：

（一个刚接触Vue.js不久的前端萌新，也是第一次在网上回答问题，仅供参考）

Answer 2

不用type="selection"然后自己通过checkbox组合。
这问题翻译过来就是，人家定义了几套主题，我能不能用这套主题，然后那里换成别的。然鹅element ui没有定义这样的需求，因此你只能自己组装。

Answer 3

看这里

Answer 4

楼主解决了吗

Answer 5

使用querySelector选择器就好了,
document.querySelector('.el-checkbox').innerHTML = '选择'
再把宽度设置下,不然只会文字会被压缩成三个黑点,
document.querySelector('.el-table-column--selection .cell').style.padding = '0',
别谢我,真的真的别谢我

Answer 6

亲测有效(附：自定义全选效果)

思路：1、隐藏checkbox 2、用content和:after添加文字

自定义全选效果：
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" align="left"></el-table-column>
<el-table-column type="index" label="序号" align="center" width="45"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" align="center"></el-table-column>
</el-table>

<el-checkbox v-model="bulksubsidyChecked" @change="checkAllFun">全选</el-checkbox>

data下的内容：

tableData: [{name:  '王小虎',age:  '23'},
  {name:  '王小虎',age:  '23'}],
  
multipleSelection: [],
bulksubsidyChecked:  false,

methods下内容：

handleSelectionChange(val) {
    this.multipleSelection  =  val;
},
checkAllFun:  function() {
    if (this.bulksubsidyChecked) {
        this.toggleSelection(this.tableData);
    } else {
        this.toggleSelection();}},
toggleSelection(rows) {
    this.multipleSelection = [];
    if (rows) {
        rows.forEach(row  => {
           this.$refs.multipleTable.toggleRowSelection(row, true);});
    } else {
         this.$refs.multipleTable.clearSelection();}},

Answer 7

把那个框隐藏了 用定位字放上去