element UI (table表格)_elementui表格

table 左对齐

<el-table
	:header-cell-style="{'text-align':'left'}"
	:cell-style="{'text-align':'left'}"
	>
1
2
3
4

table表格内容过长时显示省略号,并且鼠标悬停时显示全部信息

<el-table-column
   property="deviceIn"
   :show-overflow-tooltip="true"
   label="进门设备标识">
</el-table-column>
1
2
3
4
5

table多选时,需要disabled某些选项

<el-table-column
	align="center"
	type="selection"
	:selectable="checkSelect"
	width="55">
</el-table-column>
1
2
3
4
5
6

  /**
   * methods里面
   * row：当前行数据
   * index：当前第几位
   */
 checkSelect (row,index) {
      let isChecked = true;
      if (row.dealerName === null) { // 判断里面是否存在某个参数
        isChecked = true
      } else {
         isChecked = false
      }
    return isChecked
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

table的分页信息靠右

<div style="display: flex;justify-content: flex-end;;margin-top: 10px">
<el-pagination
	background
	@size-change="sizeChangeOfLoss"
	@current-change="currentChangeOfLoss"
	layout="sizes,prev, pager, next,total"
	:current-page="pageOfLoss"
	:page-size="sizeOfLoss"
	:total="totalOfLoss">
</el-pagination>
1
2
3
4
5
6
7
8
9
10

本身翻页时，序号永远都是从 1 开始，自定义序号，切换页码时，第一页为1-10，第二页就是11-20

--- table表序号列
<el-table-column
        label="序号"
        type="index"
        width="50">
    <template slot-scope="scope">
        <span>{{scope.$index+(page - 1) * size + 1}} </span>
    </template>
</el-table-column>
1
2
3
4
5
6
7
8
9

//解决多条记录,刷新数据时,序号不归1
refreshData() {
    this.initPage();
    this.initData();
},
//初始化page
initPage() {
    this.total = 0;
    this.page = 1;
    this.size = 10;
},
//初始化数据方法
initData() {
    this.loading = true;
    this.getRequest('/card/stu?page=' + this.page + '&size=' + this.size).then(resp => {
        this.total = resp.total;
        this.tableData = resp.list;
        this.loading = false;
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

去除elementUI表格鼠标移入背景色

html部分

<div class="group">
        <el-table></el-table>
</div>
1
2
3

css部分

// transparent表示透明效果。
<style>
.group > .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
</style>
1
2
3
4
5
6

表格_合并列

官网提供的是最基础的用法，在实际需求中多数需要从后台拿数据对某个相同的列进行合并。

<el-table
		...
		:span-method="objectSpanMethod"
		...>
</el-table>
1
2
3
4
5

这里注意:每次刷新table的时候也需要将合并列的记录 重新初始化,如下(代码中分页方法):
this.spanArr = [];
this.pos = ‘’;

data() {
		return {
			...
			tableData:[],//表格数据
			spanArr: [],//一个空的数组，用于存放每一行记录的合并数
			pos:'', //pos是spanArr的索引,需要合并行下标
			...
},
mounted() {
		...
		this.initData();
		...
},
methods: {
		//初始化数据
		initData() {
			this.getRequest("/url......" ).then(resp => {
				if (resp) {
					this.total = resp.total;//分页
		            this.tableData = resp.list;//数据
	                this.getSpanArr(this.tableData);
	            }
	        })
		},
        /*合并列  begin*/
        getSpanArr(data) {
            // data就是我们从后台拿到的数据
            for (let i = 0; i < data.length; i++) {
                //如果是第一条记录（索引为０），向数组中加入１，并设置索引位置
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0;//spanArr的索引
                } else {
                    //如果不是第一条记录，则判断它与前一条记录是否相等
                    //根据相同 扣分类别名称 进行合并,根据需要可进行修改
                    if (data[i].proName === data[i - 1].proName) {
                        //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
        },
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 2) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    // [0,0] 表示这一行不显示， [2,1]表示行的合并数
                    rowspan: _row,
                    colspan: _col
                };
            }
        },
        /*合并列  end*/
        //选页
        sizeChange(currentSize) {
            this.page = 1;
            this.size = currentSize;
            this.spanArr = [];//用于存放每一行记录的合并数
            this.pos = '';//spanArr下标
            this.initData();
        },
        currentChange(currentPage) {
            this.size = 10;
            this.page = currentPage;
            this.spanArr = [];//用于存放每一行记录的合并数
            this.pos = '';//spanArr下标
            this.initData();
        },
}
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