diff --git a/examples/components/tableExpand.vue b/examples/components/tableExpand.vue
index b7997a0..99d9344 100755
--- a/examples/components/tableExpand.vue
+++ b/examples/components/tableExpand.vue
@@ -1,16 +1,44 @@
+<style scoped>
+ .expand-row{
+ margin-bottom: 16px;
+ }
+</style>
<template>
- <div>{{ name }}</div>
+ <div>
+ <Row class="expand-row">
+ <Col span="8">
+ <span class="expand-key">Job: </span>
+ <span class="expand-value">{{ row.job }}</span>
+ </Col>
+ <Col span="8">
+ <span class="expand-key">Interest: </span>
+ <span class="expand-value">{{ row.interest }}</span>
+ </Col>
+ <Col span="8">
+ <span class="expand-key">Birthday: </span>
+ <span class="expand-value">{{ row.birthday }}</span>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="8">
+ <span class="expand-key">Favorite book: </span>
+ <span class="expand-value">《{{ row.book }}》</span>
+ </Col>
+ <Col span="8">
+ <span class="expand-key">Favorite movie: </span>
+ <span class="expand-value">{{ row.movie }}</span>
+ </Col>
+ <Col span="8">
+ <span class="expand-key">Favorite music: </span>
+ <span class="expand-value">{{ row.music }}</span>
+ </Col>
+ </Row>
+ </div>
</template>
<script>
export default {
props: {
- name: String
- },
- created () {
- console.log(this.name + ': 被创建');
- },
- destroyed () {
- console.log(this.name + ': 被销毁');
+ row: Object
}
- }
+ };
</script>
\ No newline at end of file
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index ed57bce..af4d2bb 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -412,289 +412,376 @@
<!--};-->
<!--</script>-->
+<!--<template>-->
+ <!--<div>-->
+ <!--<Table :columns="columns8" :data="data7" size="small" ref="table"></Table>-->
+ <!--<br>-->
+ <!--<Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>-->
+ <!--<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>-->
+ <!--<Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>-->
+ <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+ <!--export default {-->
+ <!--data () {-->
+ <!--return {-->
+ <!--columns8: [-->
+ <!--{-->
+ <!--"title": "名称",-->
+ <!--"key": "name",-->
+ <!--"fixed": "left",-->
+ <!--"width": 200-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "展示",-->
+ <!--"key": "show",-->
+ <!--"width": 150,-->
+ <!--"sortable": true,-->
+ <!--filters: [-->
+ <!--{-->
+ <!--label: '大于4000',-->
+ <!--value: 1-->
+ <!--},-->
+ <!--{-->
+ <!--label: '小于4000',-->
+ <!--value: 2-->
+ <!--}-->
+ <!--],-->
+ <!--filterMultiple: false,-->
+ <!--filterMethod (value, row) {-->
+ <!--if (value === 1) {-->
+ <!--return row.show > 4000;-->
+ <!--} else if (value === 2) {-->
+ <!--return row.show < 4000;-->
+ <!--}-->
+ <!--}-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "唤醒",-->
+ <!--"key": "weak",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "登录",-->
+ <!--"key": "signin",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "点击",-->
+ <!--"key": "click",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "激活",-->
+ <!--"key": "active",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "7日留存",-->
+ <!--"key": "day7",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "30日留存",-->
+ <!--"key": "day30",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "次日留存",-->
+ <!--"key": "tomorrow",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "日活跃",-->
+ <!--"key": "day",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "周活跃",-->
+ <!--"key": "week",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--},-->
+ <!--{-->
+ <!--"title": "月活跃",-->
+ <!--"key": "month",-->
+ <!--"width": 150,-->
+ <!--"sortable": true-->
+ <!--}-->
+ <!--],-->
+ <!--data7: [-->
+ <!--{-->
+ <!--"name": "推广名称1",-->
+ <!--"fav": 0,-->
+ <!--"show": 7302,-->
+ <!--"weak": 5627,-->
+ <!--"signin": 1563,-->
+ <!--"click": 4254,-->
+ <!--"active": 1438,-->
+ <!--"day7": 274,-->
+ <!--"day30": 285,-->
+ <!--"tomorrow": 1727,-->
+ <!--"day": 558,-->
+ <!--"week": 4440,-->
+ <!--"month": 5610-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称2",-->
+ <!--"fav": 0,-->
+ <!--"show": 4720,-->
+ <!--"weak": 4086,-->
+ <!--"signin": 3792,-->
+ <!--"click": 8690,-->
+ <!--"active": 8470,-->
+ <!--"day7": 8172,-->
+ <!--"day30": 5197,-->
+ <!--"tomorrow": 1684,-->
+ <!--"day": 2593,-->
+ <!--"week": 2507,-->
+ <!--"month": 1537-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称3",-->
+ <!--"fav": 0,-->
+ <!--"show": 7181,-->
+ <!--"weak": 8007,-->
+ <!--"signin": 8477,-->
+ <!--"click": 1879,-->
+ <!--"active": 16,-->
+ <!--"day7": 2249,-->
+ <!--"day30": 3450,-->
+ <!--"tomorrow": 377,-->
+ <!--"day": 1561,-->
+ <!--"week": 3219,-->
+ <!--"month": 1588-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称4",-->
+ <!--"fav": 0,-->
+ <!--"show": 9911,-->
+ <!--"weak": 8976,-->
+ <!--"signin": 8807,-->
+ <!--"click": 8050,-->
+ <!--"active": 7668,-->
+ <!--"day7": 1547,-->
+ <!--"day30": 2357,-->
+ <!--"tomorrow": 7278,-->
+ <!--"day": 5309,-->
+ <!--"week": 1655,-->
+ <!--"month": 9043-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称5",-->
+ <!--"fav": 0,-->
+ <!--"show": 934,-->
+ <!--"weak": 1394,-->
+ <!--"signin": 6463,-->
+ <!--"click": 5278,-->
+ <!--"active": 9256,-->
+ <!--"day7": 209,-->
+ <!--"day30": 3563,-->
+ <!--"tomorrow": 8285,-->
+ <!--"day": 1230,-->
+ <!--"week": 4840,-->
+ <!--"month": 9908-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称6",-->
+ <!--"fav": 0,-->
+ <!--"show": 6856,-->
+ <!--"weak": 1608,-->
+ <!--"signin": 457,-->
+ <!--"click": 4949,-->
+ <!--"active": 2909,-->
+ <!--"day7": 4525,-->
+ <!--"day30": 6171,-->
+ <!--"tomorrow": 1920,-->
+ <!--"day": 1966,-->
+ <!--"week": 904,-->
+ <!--"month": 6851-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称7",-->
+ <!--"fav": 0,-->
+ <!--"show": 5107,-->
+ <!--"weak": 6407,-->
+ <!--"signin": 4166,-->
+ <!--"click": 7970,-->
+ <!--"active": 1002,-->
+ <!--"day7": 8701,-->
+ <!--"day30": 9040,-->
+ <!--"tomorrow": 7632,-->
+ <!--"day": 4061,-->
+ <!--"week": 4359,-->
+ <!--"month": 3676-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称8",-->
+ <!--"fav": 0,-->
+ <!--"show": 862,-->
+ <!--"weak": 6520,-->
+ <!--"signin": 6696,-->
+ <!--"click": 3209,-->
+ <!--"active": 6801,-->
+ <!--"day7": 6364,-->
+ <!--"day30": 6850,-->
+ <!--"tomorrow": 9408,-->
+ <!--"day": 2481,-->
+ <!--"week": 1479,-->
+ <!--"month": 2346-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称9",-->
+ <!--"fav": 0,-->
+ <!--"show": 567,-->
+ <!--"weak": 5859,-->
+ <!--"signin": 128,-->
+ <!--"click": 6593,-->
+ <!--"active": 1971,-->
+ <!--"day7": 7596,-->
+ <!--"day30": 3546,-->
+ <!--"tomorrow": 6641,-->
+ <!--"day": 1611,-->
+ <!--"week": 5534,-->
+ <!--"month": 3190-->
+ <!--},-->
+ <!--{-->
+ <!--"name": "推广名称10",-->
+ <!--"fav": 0,-->
+ <!--"show": 3651,-->
+ <!--"weak": 1819,-->
+ <!--"signin": 4595,-->
+ <!--"click": 7499,-->
+ <!--"active": 7405,-->
+ <!--"day7": 8710,-->
+ <!--"day30": 5518,-->
+ <!--"tomorrow": 428,-->
+ <!--"day": 9768,-->
+ <!--"week": 2864,-->
+ <!--"month": 5811-->
+ <!--}-->
+ <!--]-->
+ <!--}-->
+ <!--},-->
+ <!--methods: {-->
+ <!--exportData (type) {-->
+ <!--if (type === 1) {-->
+ <!--this.$refs.table.exportCsv({-->
+ <!--filename: '原始数据',-->
+ <!--separator: ';',-->
+ <!--quoted: true,-->
+ <!--callback (data) {-->
+ <!--console.log(data);-->
+ <!--}-->
+ <!--});-->
+ <!--} else if (type === 2) {-->
+ <!--this.$refs.table.exportCsv({-->
+ <!--filename: '排序和过滤后的数据',-->
+ <!--original: false-->
+ <!--});-->
+ <!--} else if (type === 3) {-->
+ <!--this.$refs.table.exportCsv({-->
+ <!--filename: '自定义数据',-->
+ <!--columns: this.columns8.filter((col, index) => index < 4),-->
+ <!--data: this.data7.filter((data, index) => index < 4)-->
+ <!--});-->
+ <!--}-->
+ <!--}-->
+ <!--}-->
+ <!--}-->
+<!--</script>-->
+
<template>
- <div>
- <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
- <br>
- <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
- <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
- <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>
- </div>
+ <Table :columns="columns10" :data="data9"></Table>
</template>
<script>
+ import expandRow from '../components/tableExpand.vue';
export default {
+ components: { expandRow },
data () {
return {
- columns8: [
- {
- "title": "名称",
- "key": "name",
- "fixed": "left",
- "width": 200
- },
+ columns10: [
{
- "title": "展示",
- "key": "show",
- "width": 150,
- "sortable": true,
- filters: [
- {
- label: '大于4000',
- value: 1
- },
- {
- label: '小于4000',
- value: 2
- }
- ],
- filterMultiple: false,
- filterMethod (value, row) {
- if (value === 1) {
- return row.show > 4000;
- } else if (value === 2) {
- return row.show < 4000;
- }
+ type: 'expand',
+ width: 50,
+ render: (h, params) => {
+ return h(expandRow, {
+ props: {
+ row: params.row
+ }
+ })
}
},
{
- "title": "唤醒",
- "key": "weak",
- "width": 150,
- "sortable": true
- },
- {
- "title": "登录",
- "key": "signin",
- "width": 150,
- "sortable": true
- },
- {
- "title": "点击",
- "key": "click",
- "width": 150,
- "sortable": true
- },
- {
- "title": "激活",
- "key": "active",
- "width": 150,
- "sortable": true
- },
- {
- "title": "7日留存",
- "key": "day7",
- "width": 150,
- "sortable": true
- },
- {
- "title": "30日留存",
- "key": "day30",
- "width": 150,
- "sortable": true
+ title: 'Name',
+ key: 'name'
},
{
- "title": "次日留存",
- "key": "tomorrow",
- "width": 150,
- "sortable": true
+ title: 'Age',
+ key: 'age',
+ fixed: 'right'
},
{
- "title": "日活跃",
- "key": "day",
- "width": 150,
- "sortable": true
- },
- {
- "title": "周活跃",
- "key": "week",
- "width": 150,
- "sortable": true
- },
- {
- "title": "月活跃",
- "key": "month",
- "width": 150,
- "sortable": true
+ title: 'Address',
+ key: 'address',
+ fixed: 'right'
}
],
- data7: [
- {
- "name": "推广名称1",
- "fav": 0,
- "show": 7302,
- "weak": 5627,
- "signin": 1563,
- "click": 4254,
- "active": 1438,
- "day7": 274,
- "day30": 285,
- "tomorrow": 1727,
- "day": 558,
- "week": 4440,
- "month": 5610
- },
- {
- "name": "推广名称2",
- "fav": 0,
- "show": 4720,
- "weak": 4086,
- "signin": 3792,
- "click": 8690,
- "active": 8470,
- "day7": 8172,
- "day30": 5197,
- "tomorrow": 1684,
- "day": 2593,
- "week": 2507,
- "month": 1537
- },
- {
- "name": "推广名称3",
- "fav": 0,
- "show": 7181,
- "weak": 8007,
- "signin": 8477,
- "click": 1879,
- "active": 16,
- "day7": 2249,
- "day30": 3450,
- "tomorrow": 377,
- "day": 1561,
- "week": 3219,
- "month": 1588
- },
- {
- "name": "推广名称4",
- "fav": 0,
- "show": 9911,
- "weak": 8976,
- "signin": 8807,
- "click": 8050,
- "active": 7668,
- "day7": 1547,
- "day30": 2357,
- "tomorrow": 7278,
- "day": 5309,
- "week": 1655,
- "month": 9043
- },
- {
- "name": "推广名称5",
- "fav": 0,
- "show": 934,
- "weak": 1394,
- "signin": 6463,
- "click": 5278,
- "active": 9256,
- "day7": 209,
- "day30": 3563,
- "tomorrow": 8285,
- "day": 1230,
- "week": 4840,
- "month": 9908
- },
+ data9: [
{
- "name": "推广名称6",
- "fav": 0,
- "show": 6856,
- "weak": 1608,
- "signin": 457,
- "click": 4949,
- "active": 2909,
- "day7": 4525,
- "day30": 6171,
- "tomorrow": 1920,
- "day": 1966,
- "week": 904,
- "month": 6851
+ name: 'John Brown',
+ age: 18,
+ address: 'New York No. 1 Lake Park',
+ job: 'Data engineer',
+ interest: 'badminton',
+ birthday: '1991-05-14',
+ book: 'Steve Jobs',
+ movie: 'The Prestige',
+ music: 'I Cry'
},
{
- "name": "推广名称7",
- "fav": 0,
- "show": 5107,
- "weak": 6407,
- "signin": 4166,
- "click": 7970,
- "active": 1002,
- "day7": 8701,
- "day30": 9040,
- "tomorrow": 7632,
- "day": 4061,
- "week": 4359,
- "month": 3676
+ name: 'Jim Green',
+ age: 25,
+ address: 'London No. 1 Lake Park',
+ job: 'Data Scientist',
+ interest: 'volleyball',
+ birthday: '1989-03-18',
+ book: 'My Struggle',
+ movie: 'Roman Holiday',
+ music: 'My Heart Will Go On'
},
{
- "name": "推广名称8",
- "fav": 0,
- "show": 862,
- "weak": 6520,
- "signin": 6696,
- "click": 3209,
- "active": 6801,
- "day7": 6364,
- "day30": 6850,
- "tomorrow": 9408,
- "day": 2481,
- "week": 1479,
- "month": 2346
+ name: 'Joe Black',
+ age: 30,
+ address: 'Sydney No. 1 Lake Park',
+ job: 'Data Product Manager',
+ interest: 'tennis',
+ birthday: '1992-01-31',
+ book: 'Win',
+ movie: 'Jobs',
+ music: 'Don’t Cry'
},
{
- "name": "推广名称9",
- "fav": 0,
- "show": 567,
- "weak": 5859,
- "signin": 128,
- "click": 6593,
- "active": 1971,
- "day7": 7596,
- "day30": 3546,
- "tomorrow": 6641,
- "day": 1611,
- "week": 5534,
- "month": 3190
- },
- {
- "name": "推广名称10",
- "fav": 0,
- "show": 3651,
- "weak": 1819,
- "signin": 4595,
- "click": 7499,
- "active": 7405,
- "day7": 8710,
- "day30": 5518,
- "tomorrow": 428,
- "day": 9768,
- "week": 2864,
- "month": 5811
+ name: 'Jon Snow',
+ age: 26,
+ address: 'Ottawa No. 2 Lake Park',
+ job: 'Data Analyst',
+ interest: 'snooker',
+ birthday: '1988-7-25',
+ book: 'A Dream in Red Mansions',
+ movie: 'A Chinese Ghost Story',
+ music: 'actor'
}
]
}
- },
- methods: {
- exportData (type) {
- if (type === 1) {
- this.$refs.table.exportCsv({
- filename: '原始数据',
- separator: ';',
- quoted: true,
- callback (data) {
- console.log(data);
- }
- });
- } else if (type === 2) {
- this.$refs.table.exportCsv({
- filename: '排序和过滤后的数据',
- original: false
- });
- } else if (type === 3) {
- this.$refs.table.exportCsv({
- filename: '自定义数据',
- columns: this.columns8.filter((col, index) => index < 4),
- data: this.data7.filter((data, index) => index < 4)
- });
- }
- }
}
}
</script>
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index c035ab0..bebd0d9 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -28,7 +28,7 @@
></Cell>
</td>
</table-tr>
- <tr v-if="rowExpanded(row._index)">
+ <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}">
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
<Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
</td>
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index e01d8c4..725f0a7 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -366,4 +366,8 @@
}
}
}
+
+ &-expanded-hidden{
+ visibility: hidden;
+ }
}
--
libgit2 0.21.4