# 列表编辑
在很多场景下，需要对列表的记录进行查询、更新、新增和删除操作。在大部分场景下，开发者可以通过 列表 + 表单 的方式解决这一需求。
然而在某些情况下，直接对列表记录进行更新、新增和删除反而更优雅、方便，因此通用列表加入了编辑模块。通过简单的 edit 属性配置即可实现记录更新、新增和删除操作。由于不需要配置表单呈现和执行表单操作，页面编写会相对简单，页面结构更加精简。
# 示例
<!-- 本例中通用列表省略了无关配置项 -->
<template>
<common-table
:columns="columns"
:list="data"
:edit="editSetting"
/>
</template>
<script>
export default {
data () {
return {
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: 'operate',
align: 'right',
width: '120'
}
],
data: [],
editSetting: {
fields: [
/**
* 如果字段为纯输入字段，推荐此配置方式。
* 即，将该字段配置简化为字段名，在编辑表单中默认渲染为:
* {
* label: '',
* field: 'meterNo',
* type: 'input',
* value: ''
* }
* 其中:
* label 的值将自动从该列表的 columns 列字段配置中获取
* type 的值默认为 input
*/
'meterNo',
// 下列字段的配置方式则与通用表单字段配置完全一致
{
label: '表具类型',
field: 'meterType',
type: 'select',
value: '',
rule: 'required',
options: [{
label: '普表',
value: 11
}, {
label: '卡表',
value: 12
}, {
label: '远传表',
value: 13
}],
clearable: true
}, {
label: '表具型号',
field: 'meterModel',
type: 'select',
value: '',
rule: 'required',
options: [
{
label: 'JK-2019',
value: 'JK-2019'
}, {
label: 'JK-2018',
value: 'JK-2018'
}, {
label: 'JK-2017',
value: 'JK-2017'
}, {
label: 'JK-2016',
value: 'JK-2016'
}
],
clearable: true
}, {
label: '安装日期',
field: 'installDate',
type: 'datepicker',
value: '',
rule: 'required',
valueFormat: 'timestamp',
innerType: 'date'
}
],
// 更新模式配置
update: {
edit1By1: true,
api: {
url: 'record-update',
method: 'PUT'
},
// 更新模式下，编辑表单的表单模式配置
formMode: {
type: 'enable',
fields: ['meterType', 'meterModel']
}
},
// 新增模式配置
create: {
add1By1: true,
api: {
url: 'record-create',
method: 'POST'
},
// 新增模式下，编辑表单的表单模式配置
formMode: {
type: 'disable',
fields: ['meterNo']
}
},
// 编辑模式
mode: 'update'
}
}
}
}
</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
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
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
# 属性
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| fields | [Array] 字段列表，与通用表单的字段配置一致。 如果该字段为纯输入字段，则配置为字段名即可，详见上述示例中的注释。 | 无 |
| mode | [String] 编辑模式。列表编辑模块支持三种模式： update - 记录更新模式 create - 记录新增模式 cancel - 记录作废（删除）模式 | update |
| apiCheck | [Object] 设置编辑模式如何判断接口调用成功，默认判断 response.status === 'success' | { props: 'status', value: 'success' } |
| update | [Object] 更新模式配置 | 无 |
| create | [Object] 新增模式配置 | 无 |
| cancel | [Object] 作废模式配置 | 无 |
编辑模式
编辑模式用于切换更新、新增、作废三种视图界面。开发者可以动态的切换编辑模式，以在不同的需要时启用所需的编辑界面。
# 更新模式
配置
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| edit1By1 | [Boolean] 是否启用逐条更新。 如果启用则在编辑模式界面显示上一条下一条切换按钮。 | false |
| api | [Object] 接口配置，请参考Api配置 | 无 |
| additionalParams | [Object] 额外参数，保存时将与编辑的记录进行合并。 该参数将同时作用于新增模式的创建的记录。 | 无 |
| formMode | [Object] 表单模式。表示在更新模式下，编辑表单采用什么表单模式配置 | 无 |
逐条更新
启用逐条更新时，如果使用者更改了编辑界面的表单内容，点击上一条下一条时将自动缓存更改。
# 新增模式
配置
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| add1By1 | [Boolean] 是否启用连续新增。 如果启用，新增模式界面的连续新增选框将被勾选，同时显示继续按钮。 | false |
| api | [Object] 接口配置，请参考Api配置。 | 无 |
| columns | [Array] 字段配置，与通用列表 columns 配置一致。 | 无 |
| formMode | [Object] 表单模式，表示在新增模式下，编辑表单采用什么表单模式配置 | 无 |
columns 配置
启用连续新增时，表单下方将生成列表，将新增的数据展示在其中，该列表的字段配置将由表单配置和原列表自动生成。当新增界面的表单字段多于原列表或与原列表不一致时，此处 columns 字段，可用于补充原列表字段的不足。
连续新增
启用连续新增时，新增的记录将展示在新增界面中表单的下方列表中。列表的最右侧一列自动插入一个删除按钮，用于删除该条记录。
# 作废模式
TIP
该模式为隐式模式，无界面，仅包含一个操作确认弹窗。启用作废模式仅需要增加作废模式配置，并调用作废方法 cancelRecord 即可，参数为要作废记录在列表中的行索引。
// 作废列表中第3条记录
this.$refs.table.cancelRecord(2)
1
2
2
配置
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| api | [Object] 接口配置，请参考Api配置 | 无 |
# 事件
列表记录编辑、新增和作废后将抛出下列事件。
| 事件名称 | 事件说明 | 参数 |
|---|---|---|
| record-update | 编辑操作完成事件 | 已编辑数据列表 |
| record-create | 新增操作完成事件 | 已新增数据列表 |
| record-cancel | 作废操作完成事件 | 已作废数据记录 |