美文网首页Vue.js学习
vue踩坑日记一:element ui更改el-table表头、

vue踩坑日记一:element ui更改el-table表头、

作者: zzzzds | 来源:发表于2019-08-08 10:11 被阅读0次

    初衷

    element ui官方封装好的 el-table 组件, 好用是挺好用的,但不可避免的是默认的样式并不一定能满足实际开发过程中的需要,那就自己动用五姑娘吧。

    入坑

    一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修改,如:
    <template>

    <el-table header-cell-style="border-color: #868686; color: #606266"></el-table>
    

    另外也可以使用 header-cell-class-name 和 cell-class-name 属性,如:
    <template>

    <el-table cell-class-name="cell-class-name"></el-table>
    

    <style>

    .cell-class-name {
      border-color: #868686;
    }
    

    问题

    使用 header-cell-style和 cell-style 属性虽然能正常显示效果,但会抛出异常,反正我是没整明白,另外,header-cell-class-name 设置覆盖样式,无法生效,而 cell-class-name 则可以。


    该类型检查失败

    解决方法

    设置 el-table 属性:cell-style="tableCellStyle":header-cell-style="tableHeaderCellStyle",通过 js 代码修改样式。
    <template>里添加:

    <el-table
      :data="tableData"
      :v-loading="tableLoading"
      row-key="id"
      height="100%"
      highlight-current-row
      show-summary
      border
      fit
      style="width: 100%; border:1px solid #EBEEF5; border-color: #868686"
      :cell-style="tableCellStyle"
      :header-cell-style="tableHeaderCellStyle"
    >
      <el-table-column fixed type="index" width="50"></el-table-column>
    </el-table>
    

    <script> => methods方法里添加:

    // 修改 table cell边框的背景色
    tableCellStyle () {
       return 'border-color: #868686;'
     },
    // 修改 table header cell的背景色
    tableHeaderCellStyle () {
      return 'border-color: #868686; color: #606266;'
    }
    

    相关文章

      网友评论

        本文标题:vue踩坑日记一:element ui更改el-table表头、

        本文链接:https://www.haomeiwen.com/subject/qdbkdctx.html