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

  发布时间:2020-05-21 15:18:02   作者:潇心   我要评论
这篇文章主要介绍了element带选择表格将表头的复选框改成文字的实现代码,本文通过多种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

<el-table
    ref="multipleTable"
    :data="tableData"
    :header-cell-class-name="cellclass"
    style="width: 100%">
    <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="地址"
      >
    </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{
  display:none;
  position: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

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

方法四:不使用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带选择表格将表头的复选框改成文字的文章就介绍到这了,更多相关选择表格将表头的复选框改成文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • 浅析CSS中单位px、rem、em、vh、vw之间的区别

    这篇文章主要介绍了CSS中单位px、rem、em、vh、vw之间的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-25
  • element带选择表格将表头的复选框改成文字的实现代码

    这篇文章主要介绍了element带选择表格将表头的复选框改成文字的实现代码,本文通过多种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,
    2020-05-21
  • css中一些常用的font-size字体单位和line-height详解

    这篇文章主要介绍了css中一些常用的font-size字体单位和line-height的相关知识,给大家提到了px(pixel)像素的一些小知识,本文通过实例代码相结合给大家介绍的非常详细,感
    2020-05-20
  • css+html实现Skeleton Screen 加载占位图动画效果(带动画)

    这篇文章主要介绍了css+html实现Skeleton Screen 加载占位图动画效果(带动画),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要
    2020-05-19
  • CSS盒子隐藏/显示后再最上层的实现代码

    这篇文章主要介绍了CSS盒子隐藏/显示后再最上层的实现代码,代码简答易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-15
  • css中转换为行内样式的解决方案(css-inline)

    这篇文章主要介绍了css中转换为行内样式的解决方案(css-inline),主要通过css-inline解决,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴
    2020-05-15
  • CSS实现波动水球效果的示例代码

    这篇文章主要介绍了CSS实现波动水球效果,代码分为html和css部分,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-15
  • css使用@media响应式适配各种屏幕的方法示例

    这篇文章主要介绍了css使用@media响应式适配各种屏幕的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2020-05-14
  • CSS设置div背景图的实现代码

    这篇文章主要介绍了CSS设置div背景图的实现代码,代码简单易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-14
  • CSS将img图片填满父容器div自适应容器大小的实现方法

    这篇文章主要介绍了CSS将img图片填满父容器div自适应容器大小的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2020-05-13

最新评论