# 案例
提示
组件除了继承VxeGrid的所有方法外，还拓展了updateOptions、updateColumns和updateFormItems等方法，用于更新由optionsHelper创建的表格配置项、columnsHelper创建的列配置项，以及formItemsHelper创建的表单配置项。
# 使用举例
<template>
<div>
<div style="margin-bottom: 8px">
<vxe-button status="primary" @click="updateOptions">设置表格居中对齐</vxe-button>
<vxe-button status="primary" @click="updateColumns">设置年龄列宽</vxe-button>
<vxe-button status="primary" @click="updateFormItems">设置查询名称必填</vxe-button>
</div>
<vxe-grid-wrap :grid="grid" ref="gridRef" />
</div>
</template>
<script>
import { optionsHelper, columnsHelper, formItemsHelper, useVxeGrid } from 'vxe-table-middleware';
export default {
data() {
return {
grid: null,
};
},
mounted() {
this.initGrid();
},
methods: {
async setGridData() {
await this.$nextTick();
const gridApi = useVxeGrid(this.$refs.gridRef);
gridApi.loadData([
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
]);
},
initGrid() {
const options = optionsHelper();
options.height(300).border(true).align('left');
// 构造列配置
const columns = columnsHelper();
columns.type('checkbox').fixed('left').width(60).end();
columns.field('name').title('名称').end();
columns.field('age').title('年龄').end();
columns.field('address').title('地址').end();
// 查询表单配置
const formItems = formItemsHelper();
formItems.field('name', '').title('名称').itemRender('VxeInput').end();
formItems
.field('age', '')
.title('年龄')
.itemRender('VxeNumberInput', { props: { min: 0, digits: 0 } })
.end();
formItems
.itemRender('VxeButtonGroup', {
props: {
options: [
{ type: 'submit', content: '搜索', status: 'primary' },
{ type: 'reset', content: '重置' },
],
},
})
.end();
// 构造表格
this.grid = useVxeGrid({ options, columns, formItems });
this.setGridData();
},
updateOptions() {
const gridApi = useVxeGrid(this.$refs.gridRef);
/* 方式1: */
// const options = optionsHelper();
// options.align('center');
// gridApi.updateOptions(options);
/* 方式2: */
gridApi.updateOptions((options) => {
options.align('center');
});
},
updateColumns() {
const gridApi = useVxeGrid(this.$refs.gridRef);
/* 方式1: */
// const columns = columnsHelper();
// columns.field('age').width(80).end();
// gridApi.updateColumns(columns);
/* 方式2: */
gridApi.updateColumns((columns) => {
columns.field('age').width(80).end();
});
},
updateFormItems() {
const gridApi = useVxeGrid(this.$refs.gridRef);
/* 方式1: */
// const formItems = formItemsHelper();
// formItems.field('name').rule({ required: true, message: '请输入名称' }).end();
// gridApi.updateFormItems(formItems);
/* 方式2: */
gridApi.updateFormItems((formItems) => {
formItems.field('name').rule({ required: true, message: '请输入名称' }).end();
});
},
},
};
</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
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
显示 复制 复制
← 说明