H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】element table怎么去掉全选的checkbox框换成汉字

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

clipboard.png

想改成

clipboard.png

回答:

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


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

clipboard.png


clipboard.png


2.

clipboard.png


效果如下:

clipboard.png

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

回答:

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

回答:

看这里

回答:

楼主解决了吗

回答:

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

回答:

亲测有效(附:自定义全选效果)
image.png

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

自定义全选效果:
<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();}},

回答:

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

本文地址:H5W3 » 【Web前端问题】element table怎么去掉全选的checkbox框换成汉字

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址