elementUI之Table表格的常用功能整理和表格封装使用_label-class-name

elementUI之Table表格的常用功能

tooltip-effect使用

1、el-table 标签上 加 tooltip-effect="light" ；// 也可以用tooltip-effect="dark" ；
2、el-table-column标签上 加 show-overflow-tooltip；
3、省略的内容会在 hover 时以 tooltip 的形式显示出来；
4、给el-table 加 border，鼠标拖动表头可以改变表格的宽度；

如下图：

header-row-class-name使用

1、给 el-table 标签上 加 header-row-class-name="table-row-report"，后面字符串自行定义

<style lang="scss">
.table-row-report{
  height: 80px;
  th {
    background-color: #fff !important;
    &:nth-child(2n){
      background-color: #DDD !important;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11

选择多行数据时使用 Checkbox

1、给 el-table 标签上 @selection-change="handleSelectionChange"；
2、<el-table-column type="selection" width="55"></el-table-column>；
3、添加方法methods中 handleSelectionChange；

methods: {
    handleSelectionChange(row){
      console.log(row);
    }
}
1
2
3
4
5

选择多行数据时背景色高亮

1、给 el-table 标签上加如下方法和属性；

@selection-change="handleSelectionChange"
@row-click="selectRow"
:row-style="rowStyle"
1
2
3

2、methods中如下方法；

<script>
export default {
  data() {
    return {
      selectRow: [],
      multipleSelection: []
    }
  },
  watch: {
    multipleSelection(row) {
      //存储选中的row
      this.selectRow = []
      if (row.length > 0) {
        row.forEach((item, index) => {
          this.selectRow.push(item.id)
        })
      }
    }
  },
  methods: {
    // 多选框
    handleSelectionChange(row) {
      console.log(row)
      this.multipleSelection = row;
    },
    // 更改选中行背景色
    rowStyle({ row, rowIndex }) {
      if (this.selectRow.includes(row.id)) {
        return { "background-color": "#ddd" };
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

表头和内容居中方式

1、表头居中： header-align="center"
2、表格内容居中 align="center"

<el-table-column
  prop="name"
  label="姓名"
  width="180"
  header-align="center"
  align="center"
></el-table-column>
1
2
3
4
5
6
7

修改列的样式 label-class-name

1、给表头的某一列 label-class-name；

<el-table-column
  prop="name"
  label="姓名"
  width="180"
  header-align="center"
  align="center"
  label-class-name="changeLabelClass"
></el-table-column>
1
2
3
4
5
6
7
8

<style lang="scss">
.table-row-report {
  height: 80px;
  color: #000;
  font-weight: 600;
  th {
    background-color: #fff !important;
    &:nth-child(2n) {
      background-color: #ddd !important;
    }
  }
  th.changeLabelClass {
    background: cadetblue !important;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

表格的封装使用（样式调整等）

<template>
    <div class="shop-record-table">
       <el-table
            :data="shopRecordTableData"
            height="540"
            :header-cell-style="rowClass"
            :cell-style="cellStyle"
            header-row-class-name="table-row-shop-record"
        >
          <template slot="empty">
            <table-empty />
          </template>
          <template v-for="item in columns">
            <el-table-column
              :key="item.key"
              v-if="item.key !== 'status' && item.key !== 'operation'"
              :prop="item.key"
              :label="item.label"
              :align="item.align || 'left'"
              :width="item.width"
              show-overflow-tooltip
              :label-class-name="item.key === 'lastDate' ? 'last-date'  :''"
            >
            </el-table-column>
            <el-table-column
              v-else-if="['status'].includes(item.key)"
              :key="item.key"
              :prop="item.key"
              :label="item.label"
              :align="item.align"
              :width="item.width"
              :label-class-name="item.key === 'lastDate' ? 'last-date'  :''"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[item.key] == 2">已查</div>
                <div v-if="scope.row[item.key] == 1">草稿</div>
                <div v-if="scope.row[item.key] == 0">待查</div>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.key === 'operation'"
              :key="item.key"
              :prop="item.key"
              :label="item.label"
              :align="item.align"
              :width="item.width"
              :label-class-name="item.key === 'lastDate' ? 'last-date'  :''"
            >
            <template slot-scope="scope">
              <div v-if="scope.row[item.key] == 0" >操作0</div>
              <div v-if="scope.row[item.key] == 1" @click="handleDeleteRecord(scope.row)">操作1</div>
            </template>
          </el-table-column>
          </template>
       </el-table>
    </div>
</templat>

<script>
export default {
data () {
  return {
	shopRecordTableData：[
		{
          storeName:'牛奶店',
          storeId:'0000001',
          bussiness:'事业部',
          region:'北方',
          area:'中部',
          brand:'品牌',
          managerName:'牛先森',
          lastDate:'2021-11-17 11:16:20',
          checker:'牛先森',
          status: 0,
          operation: 0
        },
	],
	columns: [
        { key: 'storeName', label: '门店名称', width: 200, align: 'left' },
        { key: 'storeId', label: '酒店ID', width: 110, align: 'left' },
        { key: 'bussiness', label: '事业部', width: 100, align: 'left' },
        { key: 'region', label: '大区', width: 100, align: 'center' },
        { key: 'area', label: '区域', width: 140, align: 'center' },
        { key: 'brand', label: '品牌', width: 100, align: 'center' },
        { key: 'managerName', label: '店长姓名', width: 120, align: 'center' },
        { key: 'lastDate', label: '最近一次检查日期', width: 160, align: 'center' },
        { key: 'checker', label: '上次检查人', width: 130, align: 'center' },
        { key: 'status', label: '状态', width: 90, align: 'center' },
        { key: 'operation', label: '操作', width: 90, align: 'center' },
	],
  }
}

methods: {
	// 用于修改行样式
    rowClass({row, rowIndex}) {
      // console.log(row, rowIndex) //表头行标号为0
      // return 'background:red'
      return ''
    },
    // 用于修改单元格样式
    cellStyle({row, column, rowIndex, columnIndex}){
      // console.log(row, column, rowIndex, columnIndex) //表头行标号为0
      if(columnIndex === 0){ // rowIndex/columnIndex 指定坐标
        return 'padding:0 10px'
      } else {
        return ''
      }
    }
 }
}
</script>


// 样式
<style lang="scss">
  .shop-record-table{
    width: 100%;
    height: 540px;
    border: 1px solid #EFEFF6;
    border-radius: 6px;
    .el-table__row {
      height: 50px;
      // td {
      //   padding: 0 30px;
      // }
    }
    .has-gutter tr {
      height: 50px;
    }
    .has-gutter tr th {
      font-size: 14px;
      color: #333333;
      font-family: Arial;
    }
    .has-gutter tr{
      :first-child{
        padding-left: 10px;
      }
    }
    thead th {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      height: 40px;
      background: #F5F6FB;
    }
    // 滚动条的宽度
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条
    }
    // 滚动条的滑块
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #E2E2E2;
      border-radius: 3px;
    }
    th.last-date .cell{
      padding: 0 50px;
    }
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

更新中…