基于Vue 2.x版本Element中Table 表格背景色、表头等样式自定义

老头要上朝

已于 2024-07-30 10:48:17 修改

阅读量391

点赞数 9

文章标签： vue.js javascript 前端

于 2024-07-30 10:39:47 首次发布

本文链接：https://blog.csdn.net/qq_35153900/article/details/140787442

版权

工作中有用到对这一块样式的自定义，记录一下，仅供参考！

1、表头背景色的修改

1.1 行内样式修改

1.2 属性方法修改

1.3 表头字体颜色及其他属性修改

3、某行内容过长对默认提示框架进行设置

1、表头背景色的修改

1.1 行内样式修改

核心代码：

<el-table :data="tableData" :header-cell-style="{ background: '#FF69B4 !important' ,color:'#ededed  !important'}" style="width: 100%">

1.2 属性方法修改

核心代码：

  <el-table :data="tableData"  :header-cell-style="rowClass" style="width: 100%">

   methods: {
      rowClass({row,column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          if(columnIndex===0||columnIndex===1){
            return {background:'#98ff72  !important',color:'#ededed  !important'};//不用这种写法不生效
          }else{
            return {background:'yellow  !important'};
          }
        }
        return null;
      },
    }

1.3 表头字体颜色及其他属性修改

由于上面对于字体颜色处理没生效，要想字体颜色也自定义，需要加入样式如下：

<style scoped>
   /*表格的表头颜色 */
  /deep/ .el-table__header-wrapper .cell {
    color: red;
    font-size: x-large;
    font-weight: bold;
  }


</style>

2、单元格背景色修改

2.1 行内样式修改

核心代码：

:cell-style="{ background: '#AEFFE9 !important' ,color:'#ededed  !important'}"

<el-table :data="tableData" :cell-style="{ background: '#AEFFE9 !important' ,color:'#ededed  !important'}"  :header-cell-style="{ background: '#FF69B4 !important' ,color:'#ededed  !important'}" style="width: 100%">

2.2属性方法修改

核心代码：

<el-table :data="tableData" :cell-style="cellStyle"  :header-cell-style="{ background: '#FF69B4 !important' ,color:'#ededed  !important'}" style="width: 100%">





methods: {
      cellStyle({row, column, rowIndex, columnIndex}) {
        if (column.property === 'name') {
          switch (row.name) {
            case '张三':
              return {background: 'pink', color: '#FFFFFF'};//color未生效
              break;
            case '李四':
              return {background: '#98ff72', color: '#FFFFFF'};
              break;
          }
        }
      },
}

2.3 插槽方式修改

上面方式对字体颜色不生效，可以用下面的方式处理或者某列加<span>对字体样式进行设置，

可以修改背景色、字体颜色、字体加粗、字号大小等，视需求而定。

核心代码：

<el-table-column prop="address" label="地址">
  <template slot-scope="scope">
    <div :style="{ background:'#4CFCFF !important',color: scope.row.address ? 'red' : 'black' ,fontWeight:'bold', fontFamily:'华文行楷'}">
          {{ scope.row.address }}
    </div>
  </template>
</el-table-column>

3、某行内容过长对默认提示框架进行设置

原始效果：

设置后效果：

核心代码：利用插槽对单元格提示进行改造

<el-table-column prop="address" label="地址" show-overflow-tooltip>
   <!--   <template slot-scope="scope">
        <div :style="{ background:'#4CFCFF !important',color: scope.row.address ? 'red' : 'black' ,fontWeight:'bold', fontFamily:'华文行楷'}">
          {{ scope.row.address }}
        </div>
      </template>-->

 <template slot-scope="scope">
    <el-tooltip  class="item" effect="dark"  placement="top">
       <template slot="content">
         <textarea style="width:300px;height: 120px;font-size: 12px;background-color: #303133;color: white">{{ scope.row.address }}</textarea>
       </template>
      <span style="font-size: large">
        <div :style="{ background:'#4CFCFF !important',color: scope.row.address ? 'red' : 'black' ,fontWeight:'bold', fontFamily:'华文行楷'}">
              {{scope.row.address.length>50?scope.row.address.substr(0,50)+'...':scope.row.address}}
        </div>
      </span>
    </el-tooltip>
 </template>
</el-table-column>

设置弹框背景色等属性：