# Common Table 通用列表
通用列表组件（common-table）已注册到全局，无需单独引入。但如果需要引入到其他项目中，首先需要将该组件复制到目标项目的 src/components 目录，然后参考下面的如何引入。
该组件用于数据记录列表的展示。组件内嵌了筛选和列表编辑模块。
# 如何引入
import commonTable from '@/components/common-table'
export default {
name: '',
components: {
commonTable
},
...
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 使用示例
你可以直接复制使用此处代码
<template>
<page class="filter-table-demo" class-name="hw100">
<panel
:title-fixed="true"
title="表具详述"
class="h100 w-2-1"
>
<common-table
v-model="params"
:columns="columns"
:filters="filters"
:filter-setting="filterSetting"
:page="page"
:table-setting="tableSetting"
:list="data"
:loading="loading"
:actions="tableActions"
class="p15 pb0"
@select="rowSelect"
/>
</panel>
</page>
</template>
<script>
export default {
data () {
return {
data: [],
params: {},
columns: [
{
label: 'ID',
field: 'id'
}, {
label: '表具编号',
field: 'meterNo',
sortable: true,
sortBy: 'meterNo'
}, {
label: '表具类型',
field: 'meterType'
}, {
label: '表具型号',
field: 'meterModel'
}, {
label: '安装日期',
field: 'installDate',
format: {
type: 'parseTime',
set: '{y}-{m}-{d}'
},
align: 'right'
}, {
label: '在用状态',
field: 'meterStatus',
format: {
type: 'custom',
set: data => {
return {
0: '待安装',
1: '已安装',
2: '未用',
3: '在用'
}[data]
}
},
align: 'right'
}
],
filters: ['meterNo'],
filterSetting: {
col: 1,
width: 120
},
tableSetting: {
rowKey: 'id',
select: 'single'
},
loading: false,
page: {
total: 0,
page: 1,
length: 20
},
tableActions: [
{
label: '查询',
onClick: this.getList
}, {
label: '新建',
onClick: this.createRecord
}
]
}
},
methods: {
rowSelect (val) {
console.info('row select =>', val)
}
}
}
</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
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
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
# 属性
| 属性名称 | 属性说明 | 默认值 |
|---|---|---|
| filters | [Array] 筛选工具条控件筛选条件字段配置 如果不设置该属性则不显示筛选工具条 详细配置请参考 filter-bar 设置 | 无 |
| filterSetting | [Object] 筛选工具条外观配置 具体配置参见 筛选条外观配置 | 无 |
| page | [Object] 数据分页控件 配置参数查看 page 设置 | 无 |
| columns | [Array] 列字段配置 配置参数查看 columns 设置 | 必填 |
| tableSetting | [Object] 列表全局配置配置参数查看 tableSetting 设置 | {} |
| actions | [Array] 顶部工具栏右侧动作区按钮设置 配置参数查看 actions 设置 | [] |
| list | [Array] 数据列表 | [] |
| loading | [Boolean] 显示加载提示 开发者可以在发起数据请求时将值设置为 true 以显示加载状态 | false |
| showRefreshButton | [Boolean] 是否显示列表刷新按钮，点击刷新按钮将触发查询条件更新 | false |
| edit | [Object] 列表编辑配置，支持列表记录的更新、新增、作废（删除）操作。配置参数查看列表编辑 | 无 |
# 事件
| 事件名称 | 事件说明 |
|---|---|
| select | 列表有行被选中时(单选、多选)，将抛出该事件，并携带选中行的数据。 |
| input | 组件内分页、筛选参数更新时，将抛出该事件，并携带更新后分页和筛选参数数据 用于 v-model 双向绑定，无需单独使用 |
| change | 组件内分页、筛选参数更新时，将抛出该事件，并携带更新后分页和筛选参数数据 该事件将在 input 事件之后抛出 |
| record-update | 启用列表编辑时，编辑操作完成事件 |
| record-create | 启用列表编辑时，新增操作完成事件 |
| record-cancel | 启用列表编辑时，作废操作完成事件 |
# 方法
| 方法名称 | 说明 | 参数 |
|---|---|---|
| selectRow | 选中单个行 | [Number|Object] row 行索引或行数据 |
| selectRows | 选中多个行，仅多选时可用 | [Array<Number|Object>] rows 行索引或行数据列表 |
| clearSelection | 清空选中行 | 无 |
| toggleRowSelection | 切换某一行的选中状态，仅多选时可用。 | [Number|Object] row 行索引或行数据 [Boolean] selected 是否选中 |
| toggleAllSelection | 用于多选表格，切换所有行的选中状态 | 无 |
| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态。 | [Number|Object] row 行索引或行数据 [Boolean] expanded 是否展开 |
| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | 无 |
| sort | 手动对 Table 进行排序。 | [String] prop 排序字段 [String] order 排序方向 |
| doLayout | 对 Table 进行重新布局。 当 Table 或其祖先元素由隐藏切换为显示时可能需要调用此方法 | 无 |
| setParams | 更新筛选条件 | [Object] params 新筛选条件 |
TIP
对于 toggleRowSelection toggleAllSelection toggleRowExpansion clearSort sort doLayout 等方法，可以参考 element-ui 文档 (opens new window)。
# page 设置
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| page | [Number] 当前页码 | 1 |
| total | [Number] 记录总数 | 0 |
| length | [Number] 当前每页显示条数 | 20 |
| sizes | [Array] 每页显示条数候选值 | [10, 20, 50, 100, 200] |
| layout | [String] 分页控件布局 请参考 element-ui 文档 分页属性 (opens new window) | 'total, sizes, prev, pager, next, jumper' |
# tableSetting 设置
| 属性 | 说明 | 默认值 |
|---|---|---|
| select | [String] 开启列表行选择 single/multiple | 无 |
| align | [String] 表格默认对齐 | 无 |
| height | [String|Number] 表格高度 | 无 |
| maxHeight | [String|Number] 表格最大高度 | 无 |
| stripe | [Boolean] 是否显示斑马纹 | false |
| border | [Boolean] 是否显示纵向边框 | false |
| defaultSort | [Object] 默认排序配置 参考 element-ui 列表排序 (opens new window) 示例 | 无 |
| fit | [Boolean] 当列表内容宽度不足容器宽度时，是否自动充满容器宽度 | true |
| style | [String] 自定义内嵌样式 | 无 |
| rowKey | [String] 展示树形数据时，指定索引字段 | id |
| resetPageOnQuery | [Boolean] 发起筛选时是否重置页码至第一页 | false |
| rowClassName | [Function] 根据列表中每条记录，自定义行样式 函数接收一个行对象，该对象包含以下属性： row - 当前行数据对象 rowIndex - 当前行于本页内的索引 可参考 element-ui 带状态表格 (opens new window) 示例 | 无 |