Skip to content

Commit e2dd3a1

Browse files
kouchaokouchao
committed
新增 表格组件，新增 表格demo
1 parent 1446ac8 commit e2dd3a1

File tree

12 files changed

+283
-3
lines changed

12 files changed

+283
-3
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
<lay-menu-child-item title="面板" :to="{name: 'panel'}"></lay-menu-child-item>
7373
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
7474
<lay-menu-child-item title="时间线" :to="{name: 'timeline'}"></lay-menu-child-item>
75-
7675
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
76+
<lay-menu-child-item title="静态表格" :to="{name: 'table'}"></lay-menu-child-item>
7777

7878
</lay-menu-item>
7979
</lay-menu>

‎src/components/side/src/side.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<div class="layui-side layui-bg-black">
3-
<slot></slot>
3+
<div class="layui-side-scroll">
4+
<slot></slot>
5+
</div>
6+
47
</div>
58
</template>
69
<script>

‎src/components/table-column/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/3
3+
*/
4+
5+
import LayTableColumn from '../table/src/table-column';
6+
7+
/* istanbul ignore next */
8+
LayTableColumn.install = function(Vue) {
9+
Vue.component(LayTableColumn.name, LayTableColumn);
10+
};
11+
12+
export default LayTableColumn;

‎src/components/table/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/3
3+
*/
4+
5+
import LayTable from './src/table';
6+
7+
/* istanbul ignore next */
8+
LayTable.install = function(Vue) {
9+
Vue.component(LayTable.name, LayTable);
10+
};
11+
12+
export default LayTable;

‎src/components/table/src/table-colgroup.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<colgroup>
3+
<col v-for="item in children" :width="item">
4+
<div style="display: none">
5+
<slot></slot>
6+
</div>
7+
</colgroup>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: "LayTableColgroup",
13+
props: {
14+
children: Array
15+
}
16+
}
17+
</script>
18+
19+
<style scoped>
20+
21+
</style>

‎src/components/table/src/table-column.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: "LayTableColumn",
8+
props: {
9+
prop: {
10+
type: String,
11+
required: true
12+
},
13+
width: Number,
14+
label: String
15+
}
16+
}
17+
</script>
18+
19+
<style scoped>
20+
21+
</style>

‎src/components/table/src/table-header.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<thead>
3+
<tr>
4+
<th v-for="item in children">{{item}}</th>
5+
</tr>
6+
7+
</thead>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: "LayTableHeader",
13+
props: {
14+
children: Array
15+
}
16+
}
17+
</script>
18+
19+
<style scoped>
20+
21+
</style>

‎src/components/table/src/table-tr.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<tr>
3+
<td v-for="item in children">{{data[item.prop]}}</td>
4+
</tr>
5+
6+
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: "LayTableHeader",
12+
props: {
13+
children: Array,
14+
data: Object
15+
}
16+
}
17+
</script>
18+
19+
<style scoped>
20+
21+
</style>

‎src/components/table/src/table.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<table class="layui-table" :lay-skin="skin" :lay-even="even" :lay-size="size">
3+
<lay-table-colgroup :children="colgroup"></lay-table-colgroup>
4+
<lay-table-header :children="header"></lay-table-header>
5+
<tbody>
6+
<lay-table-tr v-for="item in data" :children="tr" :data="item"></lay-table-tr>
7+
<div style="display: none">
8+
<slot></slot>
9+
</div>
10+
</tbody>
11+
</table>
12+
</template>
13+
14+
15+
<script>
16+
import LayTableColgroup from './table-colgroup'
17+
import LayTableHeader from './table-header'
18+
import LayTableTr from './table-tr'
19+
20+
import LayTableColumn from './table-column'
21+
22+
export default {
23+
name: "LayTable",
24+
components: {
25+
LayTableColgroup,
26+
LayTableHeader,
27+
LayTableTr,
28+
LayTableColumn
29+
},
30+
data() {
31+
return {
32+
children: [],
33+
colgroup: [],
34+
header: [],
35+
tr: []
36+
}
37+
},
38+
props: {
39+
data: {
40+
type: Array,
41+
default() {
42+
return []
43+
}
44+
},
45+
skin: {
46+
type: String
47+
},
48+
even: Boolean,
49+
size: String
50+
},
51+
provide() {
52+
return {
53+
rootTable: this
54+
};
55+
},
56+
mounted() {
57+
this.children = this.$slots.default.map(o => o.child)
58+
this.colgroup = this.children.filter(o => o.prop).map(o => o.width || '')
59+
this.header = this.children.filter(o => o.prop).map(o => o.label || '')
60+
this.tr = this.children.filter(o => o.prop)
61+
62+
}
63+
}
64+
</script>
65+
66+
<style scoped>
67+
68+
</style>

‎src/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ import LayCollapse from '@/components/collapse'
4242
import LayCollapseItem from '@/components/collapse-item'
4343
import LayTimeline from '@/components/timeline'
4444
import LayTimelineItem from '@/components/timeline-item'
45+
import LayTable from '@/components/table'
46+
import LayTableColumn from '@/components/table-column'
4547

4648

4749

@@ -87,7 +89,9 @@ const layui = {
8789
LayCollapse,
8890
LayCollapseItem,
8991
LayTimeline,
90-
LayTimelineItem
92+
LayTimelineItem,
93+
LayTable,
94+
LayTableColumn
9195
]
9296
components.forEach(function (component) {
9397
Vue.component(component.name, component)

0 commit comments

Comments
 (0)