fixed #461
This commit is contained in:
梁灏
parent
713bd3d75d
commit
a6fc94382c
4 changed files with 102 additions and 56 deletions
|
|
@ -192,7 +192,7 @@
|
|||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin: 1000px 0 0 ">
|
||||
<Select v-model="model1" style="width:200px">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
|
||||
</Select>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="margin: 100px;">
|
||||
<Slider v-model="value1" :step="5" show-input></Slider>
|
||||
<div style="margin: 0 400px;">
|
||||
<Slider v-model="value1" show-input></Slider>
|
||||
<Slider v-model="value2" range></Slider>
|
||||
<Slider v-model="value3" range disabled></Slider>
|
||||
{{ value1 }}{{value2}}
|
||||
|
|
|
|||
|
|
@ -1,70 +1,113 @@
|
|||
<template>
|
||||
<Table border :context="self" :columns="columns7" :data="data6"></Table>
|
||||
<div>
|
||||
<Table :context="self" :data="tableData1" :columns="tableColumns1" stripe></Table>
|
||||
<div style="margin: 10px;overflow: hidden">
|
||||
<div style="float: right;">
|
||||
<Page :total="100" :current="1" @on-change="changePage"></Page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
columns7: [
|
||||
tableData1: this.mockTableData1(),
|
||||
tableColumns1: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<div style="white-space:nowrap;"><Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker></div>`;
|
||||
title: '名称',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
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: '年龄',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
title: '画像内容',
|
||||
key: 'portrayal',
|
||||
render (row, column, index) {
|
||||
return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
|
||||
return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
|
||||
<tag>${row.portrayal.length}</tag>
|
||||
<div slot="content">
|
||||
<ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
|
||||
</div>
|
||||
</Poptip>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗'
|
||||
title: '选定人群数',
|
||||
key: 'people',
|
||||
render (row, column, index) {
|
||||
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>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
title: '取样时段',
|
||||
key: 'time',
|
||||
render (row) {
|
||||
return `近${row.time}天`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
title: '更新时间',
|
||||
key: 'update',
|
||||
render (row, column, index) {
|
||||
return `{{ formatDate(tableData1[${index}].update) }}`;
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show (index) {
|
||||
this.$Modal.info({
|
||||
title: '用户信息',
|
||||
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
|
||||
})
|
||||
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;
|
||||
},
|
||||
remove (index) {
|
||||
this.data6.splice(index, 1);
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -301,18 +301,21 @@
|
|||
}
|
||||
},
|
||||
changeSinglePosition (newPos) {
|
||||
if (newPos >= 0 && (newPos <= 100)) {
|
||||
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
|
||||
const steps = Math.round(newPos / lengthPerStep);
|
||||
if (newPos < 0) {
|
||||
newPos = 0;
|
||||
} else if (newPos > 100) {
|
||||
newPos = 100;
|
||||
}
|
||||
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
|
||||
const steps = Math.round(newPos / lengthPerStep);
|
||||
|
||||
this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
|
||||
this.setSinglePosition(this.currentValue);
|
||||
if (!this.dragging) {
|
||||
if (this.currentValue !== this.oldSingleValue) {
|
||||
this.$emit('on-change', this.currentValue);
|
||||
this.dispatch('FormItem', 'on-form-change', this.currentValue);
|
||||
this.oldSingleValue = this.currentValue;
|
||||
}
|
||||
this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
|
||||
this.setSinglePosition(this.currentValue);
|
||||
if (!this.dragging) {
|
||||
if (this.currentValue !== this.oldSingleValue) {
|
||||
this.$emit('on-change', this.currentValue);
|
||||
this.dispatch('FormItem', 'on-form-change', this.currentValue);
|
||||
this.oldSingleValue = this.currentValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue