element带选择表格将表头的复选框改成文字的实现代码

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

@H_ 304 _10@ <el -t able ref=" ;m ultipleTable" :data="tableData" :header-cell-class-name="cellclass" style="width: 100%"> <el-table-column ty PE ="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot -s cope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column PR op="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" > </el-table-column> </el-table>

对应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{
  dis play :none;
  pos IT ion:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
  content:"选择";
  position:absolute;
  right 11px;
}

/deep/的作用：如果你使用了 别人 的组件 或者 自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你 不用 别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要使用/deep/，既 不影响 到别的地方，又能修改子组件在当前的样式。

方法二、使用表格列标题属性：label-class-name

界面代码

<el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column label-class-name="DisabledSelection"
      type="selection">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

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

<el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

对应js

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

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

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="选择"
        width="50">
        <template slot-scope="scope">
          <el-checkbox></el-checkbox></template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

方法五：直接通过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带选择表格将表头的复选框改成文字的实现代码 全部内容，希望文章能够帮你解决 element带选择表格将表头的复选框改成文字的实现代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于element带选择表格将表头的复选框改成文字的实现代码的详细内容...