fixed #549
This commit is contained in:
梁灏
parent
a6fc94382c
commit
7409cb3c27
2 changed files with 28 additions and 92 deletions
|
|
@ -1,114 +1,50 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<Table :columns="columns1" :data="data1">
|
||||||
<Table :context="self" :data="tableData1" :columns="tableColumns1" stripe></Table>
|
<div slot="header">头部</div>
|
||||||
<div style="margin: 10px;overflow: hidden">
|
<div slot="footer">底部</div>
|
||||||
<div style="float: right;">
|
</Table>
|
||||||
<Page :total="100" :current="1" @on-change="changePage"></Page>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
self: this,
|
columns1: [
|
||||||
tableData1: this.mockTableData1(),
|
|
||||||
tableColumns1: [
|
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '姓名',
|
||||||
key: 'name'
|
key: 'name'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '状态',
|
title: '年龄',
|
||||||
key: 'status',
|
key: 'age'
|
||||||
render (row) {
|
|
||||||
const color = row.status == 1 ? 'blue' : row.status == 2 ? 'green' : 'red';
|
|
||||||
const text = row.status == 1 ? '构建中' : row.status == 2 ? '构建完成' : '构建失败';
|
|
||||||
return `<tag type="dot" color="${color}">${text}</tag>`;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '画像内容',
|
title: '地址',
|
||||||
key: 'portrayal',
|
key: 'address'
|
||||||
render (row, column, index) {
|
}
|
||||||
return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
|
],
|
||||||
<tag>${row.portrayal.length}</tag>
|
data1: [
|
||||||
<div slot="content">
|
{
|
||||||
<ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
|
name: '王小明',
|
||||||
</div>
|
age: 18,
|
||||||
</Poptip>`;
|
address: '北京市朝阳区芍药居'
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '选定人群数',
|
name: '张小刚',
|
||||||
key: 'people',
|
age: 25,
|
||||||
render (row, column, index) {
|
address: '北京市海淀区西二旗'
|
||||||
return `<Poptip trigger="hover" title="${row.people.length}个客群" placement="bottom">
|
|
||||||
<tag>${row.people.length}</tag>
|
|
||||||
<div slot="content">
|
|
||||||
<ul><li v-for="item in tableData1[${index}].people" style="text-align: center;padding: 4px">{{ item.n }}：{{ item.c }}人</li></ul>
|
|
||||||
</div>
|
|
||||||
</Poptip>`;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '取样时段',
|
name: '李小红',
|
||||||
key: 'time',
|
age: 30,
|
||||||
render (row) {
|
address: '上海市浦东新区世纪大道'
|
||||||
return `近${row.time}天`
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '更新时间',
|
name: '周小伟',
|
||||||
key: 'update',
|
age: 26,
|
||||||
render (row, column, index) {
|
address: '深圳市南山区深南大道'
|
||||||
return `{{ formatDate(tableData1[${index}].update) }}`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mockTableData1 () {
|
|
||||||
let data = [];
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
data.push({
|
|
||||||
name: '商圈' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
status: Math.floor(Math.random () * 3 + 1),
|
|
||||||
portrayal: ['城市渗透', '人群迁移', '消费指数', '生活指数', '娱乐指数'],
|
|
||||||
people: [
|
|
||||||
{
|
|
||||||
n: '客群' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
c: Math.floor(Math.random () * 1000000 + 100000)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
n: '客群' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
c: Math.floor(Math.random () * 1000000 + 100000)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
n: '客群' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
c: Math.floor(Math.random () * 1000000 + 100000)
|
|
||||||
}
|
|
||||||
],
|
|
||||||
time: Math.floor(Math.random () * 7 + 1),
|
|
||||||
update: new Date()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
formatDate (date) {
|
|
||||||
const y = date.getFullYear();
|
|
||||||
let m = date.getMonth() + 1;
|
|
||||||
m = m < 10 ? '0' + m : m;
|
|
||||||
let d = date.getDate();
|
|
||||||
d = d < 10 ? ('0' + d) : d;
|
|
||||||
return y + '-' + m + '-' + d;
|
|
||||||
},
|
|
||||||
changePage () {
|
|
||||||
// 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
|
|
||||||
this.tableData1 = this.mockTableData1();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -655,8 +655,8 @@
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
if (!this.context) this.currentContext = this.$parent;
|
if (!this.context) this.currentContext = this.$parent;
|
||||||
this.showSlotHeader = this.$refs.title !== undefined;
|
this.showSlotHeader = this.$slots.header !== undefined;
|
||||||
this.showSlotFooter = this.$refs.footer !== undefined;
|
this.showSlotFooter = this.$slots.footer !== undefined;
|
||||||
this.rebuildData = this.makeDataWithSortAndFilter();
|
this.rebuildData = this.makeDataWithSortAndFilter();
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue