vue el-table的常用操作

1.去掉表格最下面的那一条线

.el-table::before {
    height: 0;
}
1
2
3

效果

2.表格去掉背景颜色变透明

.el-table,
.el-table__expanded-cell {
    background-color: transparent !important;
}
.el-table th,
.el-table tr,
.el-table td {
    background-color: transparent !important;
}
1
2
3
4
5
6
7
8
9

3.表格加载数据时，自定义文本样式

<template>
     <el-table :data="tableData" style="width: 100%">
       <template slot="empty">
         <p>{{dataText}}</p>
       </template>
       <el-table-column prop="date" label="日期" width="180"></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>
   </template>
1
2
3
4
5
6
7
8
9
10

data() {
   return {
     tableData: [],
     dataText: '' //进去页面先让字样为空
   };
 },
 
 
//请求数据
   goodsList() {
     this.dataText = '数据正在加载中···'
     this.$request(
       this.$config.baseApi + "/user/address/inde"， "get"  ).then(res => {
       if (res.code === 200) {
         this.tableData = res.data.content;
         //   当请求后台，数据为空时，再让页面显示暂无数据
         if (this.tableData.length === 0) {
           this.dataText = '暂无数据';
         }
       }
     });
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.更改表格列标题header-cell-style和文本cell-style的样式

<el-table
     ref="sortTable"
     :data="sortData"
     style="width: 100%;"
     height="100%"
     :header-cell-style="{'background-color': '#fafafa','color': 'rgb(144,157,222)','font-size': '19px','border-bottom': '1px dashed  #0F0A3B !important','text-align': 'center'}"
     :cell-style="{'background-color': '#fafafa','color': 'rgb(206,214,245)','font-size': '19px','border-bottom': '1px dashed  #5243CE !important','text-align': 'center'}"
     @mouseenter.native="mouseEnter"
     @mouseleave.native="mouseLeave"
 >
1
2
3
4
5
6
7
8
9
10

建议改用属性绑定方式：

<el-table
    ref="lockTable"
    :data="lockOfData"
    style="width: 100%;"
    height="100%"
    :header-cell-style="tableHeaderCellStyle"
    :cell-style="tableCellStyle"
    @mouseenter.native="mouseEnter"
    @mouseleave.native="mouseLeave"
>
1
2
3
4
5
6
7
8
9
10

methods: {
    tableHeaderCellStyle() {
        return {
            'background-color': '#fafafa',
            'color': 'rgb(144,157,222)',
            'font-size': '14px',
            'border-bottom': '1px dashed #0F0A3B !important',
            'text-align': 'center'
        }          
    },
    tableCellStyle() {
        return {
            'background-color': '#fafafa',
            'color': '#fff',
            'font-size': '14px',
            'border-bottom': '1px dashed #5243CE !important',
            'text-align': 'center',
            'padding': '0px'
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

border-bottom：（两根线，列首的线和表格的分隔线。删掉就没有这个线了）

5.el-table 滚动条样式 火狐与谷歌不一样

谷歌设置

.el-table__body-wrapper::-webkit-scrollbar {
    /* width: 0;宽度为0隐藏 */
    /* 整个表格透明就不要滚动条的背景颜色了 */
    width: 10px;
    border-radius: 2px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(84, 112, 198, 0.5);
}
1
2
3
4
5
6
7
8
9
10

火狐可以不设置

6.修改列宽

简单粗暴 直接添加width 手动修改列宽

<el-table-column
         prop="aa"
         label="班组"
         width="50"
     />
1
2
3
4
5

7.修改行高

在浏览器上直接查看可以发现 他的行高是由他的pandding决定的

将el-table的cell-style的padding设置，也可以删掉设置成0

<el-table :cell-style="{padding:'6px'}"></el-table>
1

全局修改td

.el-table td .cell { padding: 5px 1; }
1

8.修改某几列的背景颜色，字体颜色

        <el-table
            v-loading="loading"
            :data="prodsData"
            border
            :cell-style="changeCellStyle"
        >
1
2
3
4
5
6

    methods: {
        changeCellStyle(row, column, rowIndex, columnIndex) {
            if (row.column.label === '销售订单') {
                return 'background-color: rgba(175, 201, 229, 0.1);'
            } else {
                return 'background-color: rgba(175, 201, 229, 0.1)'
            }
        }
1
2
3
4
5
6
7
8

9. 鼠标经过颜色改变

::v-deep .el-table tbody tr:hover > td {
    background-color: #EFF5FF !important;
}
1
2
3