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

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

十余年的龙州网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整龙州建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“龙州网站设计”,“龙州网站推广”以来,每个客户项目都认真落实执行。

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

方法一:使用表格属性: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带选择表格将表头复选框改成文字的方法
转载来源:http://scyanting.com/article/ghoghe.html