這篇文章主要介紹了element帶選擇表格將表頭復(fù)選框改成文字的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、同心網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、同心網(wǎng)絡(luò)營銷、同心企業(yè)策劃、同心品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供同心建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

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

    
    
    
      {{ scope.row.date }}
    
    
    
    
    
  

對應(yīng)js

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

對應(yīng)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/的作用：如果你使用了別人的組件或者自己開發(fā)一個(gè)組件，有時(shí)候你修改一處就可能影響到別的地方，這個(gè)時(shí)候要么你不用別人的組件，自己重新封裝一個(gè)，但很多時(shí)候是不太現(xiàn)實(shí)的，所以就需要使用/deep/，既不影響到別的地方，又能修改子組件在當(dāng)前的樣式。

方法二、使用表格列標(biāo)題屬性：label-class-name

界面代碼

    
    
    
      {{ scope.row.date }}
    
    
    
    
    
  

對應(yīng)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 }}
    
    
    
    
    
  

對應(yīng)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: "選擇";
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“element帶選擇表格將表頭復(fù)選框改成文字的方法”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站題目：element帶選擇表格將表頭復(fù)選框改成文字的方法-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/deidgj.html