element带选择表格将表头复选框改成文字的方法-创新互联

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

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都做网站、同心网络推广、微信平台小程序开发、同心网络营销、同心企业策划、同心品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联建站为所有大学生创业者提供同心建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

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

    
    
    
      {{ scope.row.date }}
    
    
    
    
    
  

对应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

界面代码

    
    
    
      {{ scope.row.date }}
    
    
    
    
    
  

对应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() 界面代码

    
    
    
      {{ scope.row.date }}
    
    
    
    
    
  

对应js

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

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

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

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

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

标题名称：element带选择表格将表头复选框改成文字的方法-创新互联
URL链接：http://cqcxhl.cn/article/deidgj.html