Skip to content

Commit ca35a44

Browse files
higuaifanhiguaifan
committed
🚀 【table】添加v-for支持
1 parent 139c7d2 commit ca35a44

4 files changed

Lines changed: 115 additions & 25 deletions

File tree

‎lib/template/table/MTable.ts‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @description table组件
33
* @author 阿怪
44
* @date 2021/8/23 11:30 上午
5-
* @version v0.0.3
5+
* @version v0.0.4
66
*
77
* 一个极度简单的table组件
88
* beta版 支持 slot width 设置
@@ -12,11 +12,13 @@
1212
* v0.0.1-beta.2 新增header fixed功能
1313
* v0.0.2 header样式根据height变换
1414
* v0.0.3 添加无数据提示和empty插槽
15+
* v0.0.4 添加index参数、添加两个异常提醒，添加v-for支持
1516
*/
16-
import { defineComponent, h, VNode } from 'vue'
17+
import { defineComponent, Fragment, h, VNode } from 'vue'
1718
import { isEmpty, notEmpty } from "../../dependents/_utils/tools";
1819
import Printer from "../../other/printer/Printer";
1920
import { props } from "./api";
21+
import MTableColumn from "./MTableColumn";
2022

2123

2224
const img = h('td', { class: 'm-table-tbody-img' });
@@ -81,26 +83,40 @@ export default defineComponent({
8183
if (notEmpty(slots.default())) {
8284
const defaultSlot: any[] = slots.default();
8385
const tableColumn: columnType[] = [];
86+
87+
const initByTableColumn = (info: { param: string, label: string, width?: number | string }, children: any) => {
88+
const { param, label, width } = info;
89+
tableColumn.push({
90+
key: param,
91+
children
92+
});
93+
// 构造thead
94+
theadThList.push(h('th', { class: 'm-th', width }, label));
95+
}
96+
8497
// 遍历column
8598
defaultSlot.forEach(s => {
86-
if (s.type.name !== 'MTableColumn') {
87-
error('列表子节点必须传入m-table-column，否则将会被过滤。');
99+
100+
// 如果是Fragment类型，那大概率是v-for生成的，其他场景暂时无法判断
101+
if (s.type === Fragment) {
102+
s.children.forEach((c: typeof MTableColumn) => {
103+
initByTableColumn(c.props, c.children);
104+
});
88105
return;
89106
}
90107

108+
109+
if (s.type.name !== 'MTableColumn') {
110+
error(`传入子节点：${s.type.name}，列表子节点必须传入m-table-column，否则将会被过滤。`);
111+
return;
112+
}
91113
if (isEmpty(s.props)) {
92114
error('m-table-column必须传入props属性');
93115
return;
94116
}
95-
96-
const { param, label, width } = s.props;
97-
tableColumn.push({
98-
key: param,
99-
children: s.children
100-
});
101-
// 构造thead
102-
theadThList.push(h('th', { class: 'm-th', width }, label));
117+
initByTableColumn(s.props, s.children);
103118
})
119+
104120
props.data.forEach((d: any, i) => {
105121
tbodyTrList.push(dataTrRender(d, i, tableColumn));
106122
})

‎src/page/Main.vue‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
<template>
2-
<m-button @click="toggleLoading">toggle</m-button>
2+
<MTable :data="dataDemo">
3+
<MTableColumn v-for="item in columns" :param="item.param" :label="item.label"/>
4+
<MTableColumn param="id" label="id"/>
5+
<MTableColumn param="param" label="param"/>
6+
</MTable>
37
</template>
48

59
<script lang="ts" setup>
10+
611
/**
712
* @description playground
813
* @author 阿怪
@@ -11,14 +16,24 @@
1116
*
1217
* 公司的业务千篇一律，复杂的代码好几百行。
1318
*/
14-
import { MMessage } from "../../lib";
15-
const toggleLoading = () => {
16-
MMessage.success({
17-
content: "你好",
18-
dragAllow: true,
19-
direction: "top-center",
20-
});
21-
};
19+
import { ref } from "vue";
20+
21+
const columns = ref([
22+
{ param: 'id', label: 'id' },
23+
{ param: 'param', label: 'param' }
24+
])
25+
26+
27+
const dataDemo = ref([
28+
{ id: 1, param: '立春' },
29+
{ id: 2, param: '雨水' },
30+
{ id: 3, param: '惊蛰' },
31+
{ id: 4, param: '春分' },
32+
{ id: 5, param: '清明' },
33+
{ id: 6, param: '谷雨' },
34+
{ id: 7, param: '立夏、小满、芒种、夏至、小暑、大暑、立秋、处暑、白露、秋分、寒露、霜降、立冬、小雪、大雪、冬至、小寒、大寒' },
35+
]);
36+
2237
</script>
2338

2439
<style lang="scss" scoped>

‎tests/component/template/table/demo/VForTableColumn.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<MTable :data="data">
3+
<MTableColumn v-for="item in columns" :param="item.param" :label="item.label"/>
4+
</MTable>
5+
</template>
6+
7+
<script setup lang="ts">
8+
/**
9+
* @description
10+
* @author 阿怪
11+
* @date 2022/10/20 01:30
12+
* @version v1.0.0
13+
*
14+
* 江湖的业务千篇一律，复杂的代码好几百行。
15+
*/
16+
import { ref } from "vue";
17+
import MTable from "../../../../../lib/template/table/MTable";
18+
import MTableColumn from "../../../../../lib/template/table/MTableColumn";
19+
20+
const columns = ref([{ param: 'id', label: 'id' }, { param: 'param', label: 'param' }])
21+
const data = ref([{ id: 1, param: '立春' }, { id: 2, param: '雨水' },]);
22+
23+
</script>

tests/component/template/table.spec.ts renamed to tests/component/template/table/table.spec.ts

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@
1010
import { describe, expect, test, vi } from 'vitest';
1111
import { h } from "vue";
1212
import { mount } from "@vue/test-utils";
13-
import MTable from "../../../lib/template/table/MTable";
14-
import MTableColumn from "../../../lib/template/table/MTableColumn";
15-
import { TableProps } from "../../../lib/template/table";
13+
import MTable from "../../../../lib/template/table/MTable";
14+
import MTableColumn from "../../../../lib/template/table/MTableColumn";
15+
import { TableProps } from "../../../../lib/template/table";
1616
import { Slot } from "@vue/test-utils/dist/types";
17+
import VForTableColumn from './demo/VForTableColumn.vue'
1718

18-
describe('列表组件', function () {
19+
describe.skip('列表组件', function () {
1920

2021
const getWrapper = (props?: TableProps, slots?: Record<string, Slot>) => {
2122
return mount(MTable, { props, slots });
@@ -148,6 +149,41 @@ describe('列表组件', function () {
148149
`);
149150
})
150151

152+
test('v-for渲染column', () => {
153+
const wrapper = mount(VForTableColumn)
154+
expect(wrapper.html()).toMatchInlineSnapshot(`
155+
"<div class=\\"m-table\\">
156+
<div class=\\"m-table-header-img-top\\"></div>
157+
<div class=\\"m-table-header-img-bottom\\"></div>
158+
<div class=\\"m-table-wrap\\">
159+
<table class=\\"m-table-inner\\">
160+
<thead class=\\"m-thead\\">
161+
<tr class=\\"m-tr\\">
162+
<th class=\\"m-th\\">id</th>
163+
<th class=\\"m-th\\">param</th>
164+
</tr>
165+
</thead>
166+
<tbody class=\\"m-tbody\\">
167+
<tr class=\\"m-tr\\">
168+
<td class=\\"m-td\\">1</td>
169+
<td class=\\"m-td\\">立春</td>
170+
<td class=\\"m-table-tbody-img\\"></td>
171+
</tr>
172+
<tr class=\\"m-tr\\">
173+
<td class=\\"m-td\\">2</td>
174+
<td class=\\"m-td\\">雨水</td>
175+
<td class=\\"m-table-tbody-img\\"></td>
176+
</tr>
177+
</tbody>
178+
</table>
179+
<!---->
180+
</div>
181+
<div class=\\"m-table-border-img-bottom\\"></div>
182+
</div>"
183+
`);
184+
})
185+
186+
151187
describe('无数据状态', function () {
152188

153189
test('无slot', () => {

0 commit comments

Comments
 (0)