关于elementUI开发中使用的一些小技巧

关于表格

1.表格的勾选遇上分页

问题：当需要对表格批量操作，并且表格数量量不止一页的情况下，怎么在点击下一页时再回来能够保留之前勾选的状态（前端分页）？

在element官网中没有这个例子，但是有对应的两个属性就可以了

只需要在多选框那一列加上这个属性，并且设置表格每行的key：

例子：

<el-table
  ref="form"
  :model="form"
  :row-key="getRowKeys"
  ...
	<el-table-column type="selection" :reserve-selection="true"></el-table-column>
  ...
  methods:{
    getRowKeys(row) {
	   return row.id；//设置每行的唯一key
    },
  }

2.表格操作列固定后拖动表格的其它列

问题：很多表格太宽时一般会把操作栏那一列固定在最右边，但是element其它列是可以拖动调整宽度的，最右边一列因为时fixed脱离文档流了，会一直固定在右边，而左边的其他列因为宽度太小不能与右边一列重合了。

如官网中出现的，露出了一大片空白：

• 导致不是很好看，这时可以调整操作栏旁边的一列，设置min-width自适应就可以了

3.表格最大高度的设置

问题：有个需求，表格需要固定操作栏并且表格的最大高度需要适配各种高度，如果直接设置百分比会导致固定栏无法滚动且横向滚动条也不见了
看了一下官网：表格可以设置一个最大高度，但是仅支持数字或者单位为 px 的高度。不能支持百分比和calc计算。
但是可以设置动态的属性，所以我们只需要在computed里定义一个最大高度minHeight，表格的min-height设置为这个变量

 maxHeight() {
      // 表格最大高度为视窗高度减去其它高度
      return document.documentElement.clientHeight - 215;
    },