1、框架结构
首先新建views/systemManagement/UserManagement.vue
界面主要采用flex布局，框架结构如下，
2、表格编写
1）信息展示
表格的每一列为<el-table-column>标签。
其中<el-table-column>标签的重要属性有：
| 名称 | 说明 | 类型 |
|---|---|---|
| prop | 对应列内容的字段名，也可以使用 property 属性 | string |
| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string |
| width | 对应列的宽度 | string |
| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string |
| sortable | 对应列是否可以排序，如果设置为 ‘custom‘，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string |
| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) |
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] |
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) |
这里我们尽量对每一列都设置prop、column-key属性，方便我们使用sort和filter等方法。
对于某些信息长度较短的字段，我们要设置min-width或者width属性，使之不需要占用过多的列宽，若不这样设置，表格会默认对所有列平均分配宽度， 会导致有些较长的字段无法显示完全。
以其中一个字段id为例，其<el-table-column>标签。如下：
<el-table-column
prop="id"
width="100"
sortable="custom"
column-key="id"
label="id">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
其中scope.row就对应的是每一行的数据。
2）信息筛选
在实际使用过程中，我们需要对字段进行筛选或排序。这时我们需要在对应的<el-table-column>标签上设置相应的排序字段。
因为我们采用 后端排序与筛选的方式，所以sortable字段要设置为"custom"，并不设置filter-method属性。
为了监听筛选和排序的变化，我们要在<el-table>标签上设置监听字段。
<el-table
...
@sort-change="sortChange"
@filter-change="filterChange"
@selection-change="selectionChange"
...
>
这里
| 名称 | 说明 | 类型 |
|---|---|---|
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
这里我们以filter-change方法为例，其代码如下：
filterChange(args) {
if (args.role) {
this.filter_role = args.role
}
if (args.department) {
this.filter_department = args.department
}
this.getData();
},
对于筛选，我们要在data中设置相应的属性，每次筛选条件发生变化时，我们会记录下来，并重新请求数据。
请求数据的方法如下：
getData() {
... ...
... ...
let params = {
"filter_name": this.filter_name,
"filter_id": this.filter_id,
"filter_department": this.filter_department,
"filter_role": this.filter_role,
"filter_user_name": this.filter_user_name,
};
params.pageSize = this.pageSize;
params.pageNum = this.pageNum;
params.sort = this.sort;
params.sortMethod = this.sortMethod;
....
....
}
每次发送请求时，会将筛选、排序条件当做参数发送至后端。
3）分页展示
分页采用自带的组件，el-pagination标签。
<el-pagination
id="TablePagination"
background
layout="total,prev, pager, next,jumper,sizes"
:total="totalNum"
:page-size="pageSize"
:page-sizes="[30,100,99999]"
@current-change="pageChange"
@size-change="sizeChange"
:current-page.sync="pageNum"
>
</el-pagination>
我们仍然采用方法，监听分页大小和页数的变化，并在发生变化时重新请求数据。
请求数据时，会包含页数、页面大小等信息。
详细前后端交互将会在下一个博客汇总介绍。