Commit 7409cb3c272eedda86862413710373331487333b
1 parent
a6fc9438
fixed #549
Showing
2 changed files
with
28 additions
and
92 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div> | ||
| 3 | - <Table :context="self" :data="tableData1" :columns="tableColumns1" stripe></Table> | ||
| 4 | - <div style="margin: 10px;overflow: hidden"> | ||
| 5 | - <div style="float: right;"> | ||
| 6 | - <Page :total="100" :current="1" @on-change="changePage"></Page> | ||
| 7 | - </div> | ||
| 8 | - </div> | ||
| 9 | - </div> | 2 | + <Table :columns="columns1" :data="data1"> |
| 3 | + <div slot="header">头部</div> | ||
| 4 | + <div slot="footer">底部</div> | ||
| 5 | + </Table> | ||
| 10 | </template> | 6 | </template> |
| 11 | <script> | 7 | <script> |
| 12 | export default { | 8 | export default { |
| 13 | data () { | 9 | data () { |
| 14 | return { | 10 | return { |
| 15 | - self: this, | ||
| 16 | - tableData1: this.mockTableData1(), | ||
| 17 | - tableColumns1: [ | 11 | + columns1: [ |
| 18 | { | 12 | { |
| 19 | - title: '名称', | 13 | + title: '姓名', |
| 20 | key: 'name' | 14 | key: 'name' |
| 21 | }, | 15 | }, |
| 22 | { | 16 | { |
| 23 | - title: '状态', | ||
| 24 | - key: 'status', | ||
| 25 | - render (row) { | ||
| 26 | - const color = row.status == 1 ? 'blue' : row.status == 2 ? 'green' : 'red'; | ||
| 27 | - const text = row.status == 1 ? '构建中' : row.status == 2 ? '构建完成' : '构建失败'; | ||
| 28 | - return `<tag type="dot" color="${color}">${text}</tag>`; | ||
| 29 | - } | 17 | + title: '年龄', |
| 18 | + key: 'age' | ||
| 30 | }, | 19 | }, |
| 31 | { | 20 | { |
| 32 | - title: '画像内容', | ||
| 33 | - key: 'portrayal', | ||
| 34 | - render (row, column, index) { | ||
| 35 | - return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom"> | ||
| 36 | - <tag>${row.portrayal.length}</tag> | ||
| 37 | - <div slot="content"> | ||
| 38 | - <ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul> | ||
| 39 | - </div> | ||
| 40 | - </Poptip>`; | ||
| 41 | - } | 21 | + title: '地址', |
| 22 | + key: 'address' | ||
| 23 | + } | ||
| 24 | + ], | ||
| 25 | + data1: [ | ||
| 26 | + { | ||
| 27 | + name: '王小明', | ||
| 28 | + age: 18, | ||
| 29 | + address: '北京市朝阳区芍药居' | ||
| 42 | }, | 30 | }, |
| 43 | { | 31 | { |
| 44 | - title: '选定人群数', | ||
| 45 | - key: 'people', | ||
| 46 | - render (row, column, index) { | ||
| 47 | - return `<Poptip trigger="hover" title="${row.people.length}个客群" placement="bottom"> | ||
| 48 | - <tag>${row.people.length}</tag> | ||
| 49 | - <div slot="content"> | ||
| 50 | - <ul><li v-for="item in tableData1[${index}].people" style="text-align: center;padding: 4px">{{ item.n }}：{{ item.c }}人</li></ul> | ||
| 51 | - </div> | ||
| 52 | - </Poptip>`; | ||
| 53 | - } | 32 | + name: '张小刚', |
| 33 | + age: 25, | ||
| 34 | + address: '北京市海淀区西二旗' | ||
| 54 | }, | 35 | }, |
| 55 | { | 36 | { |
| 56 | - title: '取样时段', | ||
| 57 | - key: 'time', | ||
| 58 | - render (row) { | ||
| 59 | - return `近${row.time}天` | ||
| 60 | - } | 37 | + name: '李小红', |
| 38 | + age: 30, | ||
| 39 | + address: '上海市浦东新区世纪大道' | ||
| 61 | }, | 40 | }, |
| 62 | { | 41 | { |
| 63 | - title: '更新时间', | ||
| 64 | - key: 'update', | ||
| 65 | - render (row, column, index) { | ||
| 66 | - return `{{ formatDate(tableData1[${index}].update) }}`; | ||
| 67 | - } | 42 | + name: '周小伟', |
| 43 | + age: 26, | ||
| 44 | + address: '深圳市南山区深南大道' | ||
| 68 | } | 45 | } |
| 69 | ] | 46 | ] |
| 70 | } | 47 | } |
| 71 | - }, | ||
| 72 | - methods: { | ||
| 73 | - mockTableData1 () { | ||
| 74 | - let data = []; | ||
| 75 | - for (let i = 0; i < 10; i++) { | ||
| 76 | - data.push({ | ||
| 77 | - name: '商圈' + Math.floor(Math.random () * 100 + 1), | ||
| 78 | - status: Math.floor(Math.random () * 3 + 1), | ||
| 79 | - portrayal: ['城市渗透', '人群迁移', '消费指数', '生活指数', '娱乐指数'], | ||
| 80 | - people: [ | ||
| 81 | - { | ||
| 82 | - n: '客群' + Math.floor(Math.random () * 100 + 1), | ||
| 83 | - c: Math.floor(Math.random () * 1000000 + 100000) | ||
| 84 | - }, | ||
| 85 | - { | ||
| 86 | - n: '客群' + Math.floor(Math.random () * 100 + 1), | ||
| 87 | - c: Math.floor(Math.random () * 1000000 + 100000) | ||
| 88 | - }, | ||
| 89 | - { | ||
| 90 | - n: '客群' + Math.floor(Math.random () * 100 + 1), | ||
| 91 | - c: Math.floor(Math.random () * 1000000 + 100000) | ||
| 92 | - } | ||
| 93 | - ], | ||
| 94 | - time: Math.floor(Math.random () * 7 + 1), | ||
| 95 | - update: new Date() | ||
| 96 | - }) | ||
| 97 | - } | ||
| 98 | - return data; | ||
| 99 | - }, | ||
| 100 | - formatDate (date) { | ||
| 101 | - const y = date.getFullYear(); | ||
| 102 | - let m = date.getMonth() + 1; | ||
| 103 | - m = m < 10 ? '0' + m : m; | ||
| 104 | - let d = date.getDate(); | ||
| 105 | - d = d < 10 ? ('0' + d) : d; | ||
| 106 | - return y + '-' + m + '-' + d; | ||
| 107 | - }, | ||
| 108 | - changePage () { | ||
| 109 | - // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据 | ||
| 110 | - this.tableData1 = this.mockTableData1(); | ||
| 111 | - } | ||
| 112 | } | 48 | } |
| 113 | } | 49 | } |
| 114 | </script> | 50 | </script> |
src/components/table/table.vue
| @@ -655,8 +655,8 @@ | @@ -655,8 +655,8 @@ | ||
| 655 | }, | 655 | }, |
| 656 | created () { | 656 | created () { |
| 657 | if (!this.context) this.currentContext = this.$parent; | 657 | if (!this.context) this.currentContext = this.$parent; |
| 658 | - this.showSlotHeader = this.$refs.title !== undefined; | ||
| 659 | - this.showSlotFooter = this.$refs.footer !== undefined; | 658 | + this.showSlotHeader = this.$slots.header !== undefined; |
| 659 | + this.showSlotFooter = this.$slots.footer !== undefined; | ||
| 660 | this.rebuildData = this.makeDataWithSortAndFilter(); | 660 | this.rebuildData = this.makeDataWithSortAndFilter(); |
| 661 | }, | 661 | }, |
| 662 | mounted () { | 662 | mounted () { |