Skip to content

Commit 0c50b99

Browse files
wocwinwocwin
committed
refactor:TTable组件新增整行拖拽排序功能;修复表头合并插槽使用失效
1 parent 3503236 commit 0c50b99

File tree

13 files changed

+325
-19499
lines changed

13 files changed

+325
-19499
lines changed

‎.npmignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ yarn-error.log*
1515
# # 忽略目录
1616
examples/
1717
docs/
18-
# packages/
18+
README_IMG/
1919
public/
2020
tests/
2121
node_modules/

‎docs/.vuepress/components/docsComponents/TTable/columnSet.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="t-table" style="width:100%;">
3-
<t-table columnSetting title="显示隐藏列" :table="table" :columns="columns">
3+
<t-table columnSetting title="列显示隐藏及拖拽排序" :table="table" :columns="columns">
44
<template #amount="{param}">{{param.row.amount|currencyFilter}}</template>
55
</t-table>
66
</div>
@@ -9,7 +9,7 @@
99
<script>
1010
export default {
1111
name: 'TtableColumnSet',
12-
data () {
12+
data() {
1313
return {
1414
table: {
1515
data: [

‎docs/.vuepress/components/docsComponents/TTable/headerGroup.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<t-table :table="table" :isShowPagination="false" :columns="table.columns">
44
<template #slotNameHeader="{param}">{{param.row.date1}}</template>
55
<template #slotNameHeader1="{param}">{{param.row.name}}</template>
6+
<template #slotNameHeader12="{param}">{{param.row.date1}}</template>
67
</t-table>
78
</div>
89
</template>
@@ -38,7 +39,7 @@ export default {
3839
},
3940
]
4041
},
41-
{ prop: '', label: '姓名插槽显示', minWidth: '100', slotNameMerge: 'slotNameHeader1', },
42+
{ prop: 'name', label: '姓名', minWidth: '100' },
4243
{
4344
prop: 'date', label: '表头合并2', minWidth: '180',
4445
children: [
@@ -58,7 +59,7 @@ export default {
5859
children: [
5960
{
6061
prop: 'type', label: '类型', minWidth: '100', children: [
61-
{ prop: 'date1', label: '日期2552', minWidth: '180', },
62+
{ prop: 'date1', label: '日期', minWidth: '180' },
6263
]
6364
},
6465
]
@@ -87,7 +88,7 @@ export default {
8788
]
8889
},
8990
{ prop: 'address', label: '地址', minWidth: '220', },
90-
{ prop: 'date1', label: '不合并显示插槽', minWidth: '180', slotName: 'slotNameHeader', },
91+
{ prop: 'date1', label: '日期', minWidth: '180' },
9192
{ prop: 'address1', label: '地址', minWidth: '220', }
9293
],
9394
data: [

‎docs/.vuepress/components/docsComponents/TTable/rowSort.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<t-layout-page>
3+
<t-layout-page-item>
4+
<t-table
5+
title="行拖拽排序示例"
6+
:table="table"
7+
:columns="table.columns"
8+
isRowSort
9+
row-key="id"
10+
@rowSort="rowSort"
11+
/>
12+
</t-layout-page-item>
13+
</t-layout-page>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'TtableRowSort',
19+
data() {
20+
return {
21+
table: {
22+
data: [
23+
{
24+
id: '1',
25+
date: '2019-09-25',
26+
name: '张三',
27+
status: '2',
28+
amount: 3000,
29+
address: '广东省广州市天河区'
30+
},
31+
{
32+
id: '2',
33+
date: '2019-09-26',
34+
name: '张三1',
35+
status: '2',
36+
amount: 2000,
37+
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
38+
},
39+
{
40+
id: '3',
41+
date: '2019-09-27',
42+
name: '张三2',
43+
status: '3',
44+
amount: 4000,
45+
address: '广东省广州市天河区3'
46+
}
47+
],
48+
columns: [
49+
{ prop: 'name', label: '姓名', minWidth: '100' },
50+
{ prop: 'date', label: '日期', minWidth: '160' },
51+
{ prop: 'address', label: '地址', minWidth: '220' },
52+
{ prop: 'status', label: '状态', minWidth: '100' },
53+
{ prop: 'amount', label: '金额', minWidth: '160' },
54+
]
55+
}
56+
}
57+
},
58+
methods: {
59+
rowSort(list) {
60+
console.log('行拖拽后的数据---', list)
61+
}
62+
},
63+
}
64+
</script>

‎docs/.vuepress/components/docsComponents/TTable/slotNameMerge.vue

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<template>
2+
<t-layout-page>
3+
<t-layout-page-item>
4+
<t-table :table="table" :isShowPagination="false" :columns="table.columns">
5+
<template #slotNameHeader="{param}">{{param.row.date1}}</template>
6+
<template #slotNameHeader1="{param}">{{param.row.name}}</template>
7+
<template #slotNameHeader12="{param}">{{param.row.date1}}</template>
8+
</t-table>
9+
</t-layout-page-item>
10+
</t-layout-page>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data() {
16+
return {
17+
table: {
18+
columns: [
19+
{
20+
prop: 'name', label: '姓名', minWidth: '100',
21+
children: [
22+
{
23+
prop: 'name', label: '姓名', minWidth: '100',
24+
children: [
25+
{
26+
prop: 'type', label: '类型', minWidth: '100',
27+
children: [
28+
{ prop: 'date1', label: '日期2552', minWidth: '180', },
29+
]
30+
},
31+
]
32+
},
33+
{
34+
prop: 'type', label: '表头合并1', minWidth: '100',
35+
children: [
36+
{
37+
prop: 'type', label: '类型', minWidth: '100',
38+
children: [
39+
{ prop: 'date1', label: '日期2552', minWidth: '180' },
40+
]
41+
},
42+
]
43+
},
44+
{ prop: '', label: '姓名插槽显示', minWidth: '100', slotNameMerge: 'slotNameHeader1', },
45+
{
46+
prop: 'date', label: '表头合并2', minWidth: '180',
47+
children: [
48+
{ prop: 'type', label: '类型', minWidth: '100', },
49+
{
50+
prop: 'date', label: '日期', minWidth: '180',
51+
children: [
52+
{ prop: 'date1', label: '日期22', minWidth: '180', },
53+
]
54+
}
55+
]
56+
},
57+
]
58+
},
59+
{
60+
prop: 'name', label: '姓名', minWidth: '100',
61+
children: [
62+
{
63+
prop: 'type', label: '类型', minWidth: '100', children: [
64+
{ prop: 'date1', label: '日期插槽显示', minWidth: '180', slotNameMerge: 'slotNameHeader12', },
65+
]
66+
},
67+
]
68+
},
69+
{
70+
prop: 'type', label: '表头合并1', minWidth: '100',
71+
children: [
72+
{
73+
prop: 'type', label: '类型', minWidth: '100', children: [
74+
{ prop: 'date1', label: '日期2552', minWidth: '180', },
75+
]
76+
},
77+
]
78+
},
79+
{ prop: 'name', label: '姓名', minWidth: '100', },
80+
{
81+
prop: 'date', label: '表头合并2', minWidth: '180',
82+
children: [
83+
{ prop: 'type', label: '类型', minWidth: '100', },
84+
{
85+
prop: 'date', label: '日期', minWidth: '180',
86+
children: [
87+
{ prop: 'date1', label: '日期22', minWidth: '180', },
88+
]
89+
}
90+
]
91+
},
92+
{ prop: 'address', label: '地址', minWidth: '220', },
93+
{ prop: 'date1', label: '不合并显示插槽', minWidth: '180', slotName: 'slotNameHeader', },
94+
{ prop: 'address1', label: '地址', minWidth: '220', }
95+
],
96+
data: [
97+
{
98+
id: '1',
99+
type: '入库',
100+
date: '2019-09-25',
101+
date1: '2019-09-25',
102+
name: '张三',
103+
status: '2',
104+
address: '广东省广州市天河区',
105+
address1: '广东省广州市天河区',
106+
},
107+
{
108+
id: '2',
109+
type: '入库',
110+
date: '2019-09-26',
111+
date1: '2019-09-26',
112+
name: '张三1',
113+
status: '1',
114+
address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
115+
address1: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
116+
},
117+
{
118+
id: '3',
119+
type: '入库',
120+
date: '2019-09-27',
121+
date1: '2019-09-27',
122+
name: '张三2',
123+
status: '3',
124+
address: '广东省广州市天河区3',
125+
address1: '广东省广州市天河区3',
126+
},
127+
{
128+
id: '4',
129+
type: '出库',
130+
date: '2019-09-27',
131+
date1: '2019-09-27',
132+
name: '张三3',
133+
status: '3',
134+
address: '广东省广州市天河区3',
135+
address1: '广东省广州市天河区3',
136+
},
137+
{
138+
id: '5',
139+
type: '出库',
140+
date: '2019-09-27',
141+
date1: '2019-09-27',
142+
name: '张三4',
143+
status: '3',
144+
address: '广东省广州市天河区3',
145+
address1: '广东省广州市天河区3'
146+
}
147+
],
148+
},
149+
}
150+
}
151+
}
152+
</script>

‎docs/baseComponents/ElementUi/TTable/columnSet.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 显示隐藏列
1+
# 列显示隐藏及拖拽排序
22

33
---
44

‎docs/baseComponents/ElementUi/TTable/help.md

+2
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
| isKeyup | 单元格编辑是否开启键盘事件(向上、向下、回车横向的下一个输入框) | Boolean | false |
7373
| defaultRadioCol | 设置默认选中项（单选）defaultRadioCol 值必须大于 0！ | Number | - |
7474
| btnPermissions | 按钮权限 store.getters 接收字段 | String | - |
75+
| isRowSort | 是否开启行拖拽（结合row-key配置） | Boolean | false |
7576

7677
## Methods 方法（继承el-table的所有方法）
7778

@@ -92,6 +93,7 @@
9293
| validateError | 单元格编辑保存校验不通过触发 | 返回校验不通过的 prop--label 集合 |
9394
| handleEvent | 单元格编辑时触发事件 | configEdit 中的 event 值和对应输入的 value 值 |
9495
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
96+
| rowSort | 行拖拽排序后触发事件 | 返回排序后的table数据 |
9597

9698
## 具体操作
9799

‎docs/baseComponents/ElementUi/TTable/rowSort.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# 行拖拽排序
2+
3+
---
4+
5+
<common-code-format>
6+
<docsComponents-TTable-rowSort slot="source"></docsComponents-TTable-rowSort>
7+
在组件中需配置：<br/>
8+
属性`isRowSort`是否开启行拖拽排序<br/>
9+
事件`@rowSort`，返回最终排序的table数据<br/>
10+
`注意`: `row-key` 需要设置，否则拖动排序可能显示不正常
11+
12+
<<<@/docs/.vuepress/components/docsComponents/TTable/rowSort.vue
13+
</common-code-format>

‎docs/baseComponents/ElementUi/TTable/slotNameMerge.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# 表头合并--插槽功能
2+
3+
---
4+
5+
<common-code-format>
6+
<docsComponents-TTable-slotNameMerge slot="source"></docsComponents-TTable-slotNameMerge>
7+
8+
<<< @/docs/.vuepress/components/docsComponents/TTable/slotNameMerge.vue
9+
</common-code-format>

0 commit comments

Comments
 (0)