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
| <template>
| <div>
| <ol style="border: 1px solid #cccccc; width: 600px; padding: 8px">
| <li>1. 开启 dragSort 属性之后即可实现上下拖拽排序。</li>
| <li>2. 使用 sortKey 属性可以自定义排序保存的 key，默认为 orderNum。</li>
| <li>3. 使用 sortBegin 属性可以自定义排序的起始值，默认为 0。</li>
| <li>4. sortKey 定义的字段不需要定义在 columns 中也能正常获取到值。</li>
| <li>5. 当存在 fixed 列时，拖拽排序将会失效，仅能上下排序。</li>
| </ol>
|
| <p> 以下示例开启了拖拽排序，排序值保存字段为 sortNum，排序起始值为 3<br /> </p>
|
| <JVxeTable
| ref="tableRef1"
| toolbar
| dragSort
| sortKey="sortNum"
| :sortBegin="3"
| rowSelection
| :maxHeight="580"
| :columns="table1.columns"
| :dataSource="table1.data"
| >
| <template #toolbarSuffix>
| <a-button @click="onGetData1">获取数据</a-button>
| </template>
| </JVxeTable>
|
| <br />
| <p>以下 fixed 表格不支持拖拽排序，仅支持点击上下排序</p>
|
| <JVxeTable ref="tableRef2" toolbar dragSort rowSelection :maxHeight="580" :columns="table2.columns" :dataSource="table2.data">
| <template #toolbarSuffix>
| <a-button @click="onGetData2">获取数据</a-button>
| </template>
| </JVxeTable>
| </div>
| </template>
|
| <script lang="ts" setup>
| import { ref, reactive } from 'vue';
| import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
| import { useMessage } from '/@/hooks/web/useMessage';
|
| const tableRef1 = ref<JVxeTableInstance>();
| const tableRef2 = ref<JVxeTableInstance>();
| const table1 = reactive({
| columns: [
| {
| title: 'ID',
| key: 'id',
| width: 120,
| type: JVxeTypes.normal,
| },
| {
| title: '姓名',
| key: 'name',
| width: 240,
| type: JVxeTypes.input,
| defaultValue: 'new name',
| },
| {
| title: '字段长度',
| key: 'dbLength',
| width: 240,
| type: JVxeTypes.inputNumber,
| defaultValue: 32,
| },
| {
| title: 'sortNum',
| key: 'sortNum',
| width: 120,
| type: JVxeTypes.normal,
| },
| ] as JVxeColumn[],
| data: [
| { id: 'uuid-0001', name: '张三', dbLength: 123 },
| { id: 'uuid-0002', name: '李四', dbLength: 777 },
| { id: 'uuid-0003', name: '王五', dbLength: 666 },
| { id: 'uuid-0004', name: '赵六', dbLength: 233 },
| ],
| });
|
| const table2 = reactive({
| columns: [
| {
| title: 'ID',
| key: 'id',
| width: 320,
| fixed: 'left',
| type: JVxeTypes.normal,
| },
| {
| title: '姓名',
| key: 'name',
| width: 720,
| type: JVxeTypes.input,
| defaultValue: 'new name',
| },
| {
| title: '字段长度',
| key: 'dbLength',
| width: 720,
| type: JVxeTypes.inputNumber,
| defaultValue: 32,
| },
| ] as JVxeColumn[],
| data: [
| { id: 'uuid-0001', name: '张三', dbLength: 123 },
| { id: 'uuid-0002', name: '李四', dbLength: 777 },
| { id: 'uuid-0003', name: '王五', dbLength: 666 },
| { id: 'uuid-0004', name: '赵六', dbLength: 233 },
| ],
| });
|
| const { createMessage } = useMessage();
|
| function onGetData1() {
| createMessage.info('请看控制台');
| console.log(tableRef1.value!.getTableData());
| }
|
| function onGetData2() {
| createMessage.info('请看控制台');
| console.log(tableRef2.value!.getTableData());
| }
| </script>
|
|
