Layout support reponsive
Layout support reponsive
This commit is contained in:
梁灏
parent
43509ad876
commit
84a351dfdc
7 changed files with 380 additions and 285 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iview",
|
"name": "iview",
|
||||||
"version": "0.9.10-rc-3",
|
"version": "0.9.10-rc-4",
|
||||||
"title": "iView",
|
"title": "iView",
|
||||||
"description": "A high quality UI components Library with Vue.js",
|
"description": "A high quality UI components Library with Vue.js",
|
||||||
"homepage": "http://www.iviewui.com",
|
"homepage": "http://www.iviewui.com",
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,11 @@
|
||||||
offset: [Number, String],
|
offset: [Number, String],
|
||||||
push: [Number, String],
|
push: [Number, String],
|
||||||
pull: [Number, String],
|
pull: [Number, String],
|
||||||
className: String
|
className: String,
|
||||||
|
xs: [Number, Object],
|
||||||
|
sm: [Number, Object],
|
||||||
|
md: [Number, Object],
|
||||||
|
lg: [Number, Object]
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -24,7 +28,7 @@
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classes () {
|
classes () {
|
||||||
return [
|
let classList = [
|
||||||
`${prefixCls}`,
|
`${prefixCls}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-span-${this.span}`]: this.span,
|
[`${prefixCls}-span-${this.span}`]: this.span,
|
||||||
|
|
@ -34,7 +38,24 @@
|
||||||
[`${prefixCls}-pull-${this.pull}`]: this.pull,
|
[`${prefixCls}-pull-${this.pull}`]: this.pull,
|
||||||
[`${this.className}`]: !!this.className
|
[`${this.className}`]: !!this.className
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
|
|
||||||
|
['xs', 'sm', 'md', 'lg'].forEach(size => {
|
||||||
|
if (typeof this[size] === 'number') {
|
||||||
|
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
|
||||||
|
} else if (typeof this[size] === 'object') {
|
||||||
|
let props = this[size];
|
||||||
|
Object.keys(props).forEach(prop => {
|
||||||
|
classList.push(
|
||||||
|
prop !== 'span'
|
||||||
|
? `${prefixCls}-${size}-${prop}-${props[prop]}`
|
||||||
|
: `${prefixCls}-span-${size}-${props[prop]}`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return classList;
|
||||||
},
|
},
|
||||||
styles () {
|
styles () {
|
||||||
let style = {};
|
let style = {};
|
||||||
|
|
|
||||||
|
|
@ -52,3 +52,37 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.make-grid();
|
.make-grid();
|
||||||
|
|
||||||
|
// Extra small grid
|
||||||
|
//
|
||||||
|
// Columns, offsets, pushes, and pulls for extra small devices like
|
||||||
|
// smartphones.
|
||||||
|
|
||||||
|
.make-grid(-xs);
|
||||||
|
|
||||||
|
// Small grid
|
||||||
|
//
|
||||||
|
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
||||||
|
// to tablets.
|
||||||
|
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
.make-grid(-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Medium grid
|
||||||
|
//
|
||||||
|
// Columns, offsets, pushes, and pulls for the desktop device range.
|
||||||
|
|
||||||
|
@media (min-width: @screen-md-min) {
|
||||||
|
.make-grid(-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Large grid
|
||||||
|
//
|
||||||
|
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
||||||
|
|
||||||
|
@media (min-width: @screen-lg-min) {
|
||||||
|
.make-grid(-lg);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,13 +9,13 @@
|
||||||
.clearfix;
|
.clearfix;
|
||||||
}
|
}
|
||||||
|
|
||||||
.float-grid-columns() {
|
.float-grid-columns(@class) {
|
||||||
.col(@index) { // initial
|
.col(@index) { // initial
|
||||||
@item: ~".@{col-prefix-cls}-span-@{index}";
|
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
||||||
.col((@index + 1), @item);
|
.col((@index + 1), @item);
|
||||||
}
|
}
|
||||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||||
@item: ~".@{col-prefix-cls}-span-@{index}";
|
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
||||||
.col((@index + 1), ~"@{list}, @{item}");
|
.col((@index + 1), ~"@{list}, @{item}");
|
||||||
}
|
}
|
||||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||||
|
|
@ -27,28 +27,28 @@
|
||||||
.col(1); // kickstart it
|
.col(1); // kickstart it
|
||||||
}
|
}
|
||||||
|
|
||||||
.loop-grid-columns(@index) when (@index > 0) {
|
.loop-grid-columns(@index, @class) when (@index > 0) {
|
||||||
.@{col-prefix-cls}-span-@{index} {
|
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||||
display: block;
|
display: block;
|
||||||
width: percentage((@index / @grid-columns));
|
width: percentage((@index / @grid-columns));
|
||||||
}
|
}
|
||||||
.@{col-prefix-cls}-push-@{index} {
|
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||||
left: percentage((@index / @grid-columns));
|
left: percentage((@index / @grid-columns));
|
||||||
}
|
}
|
||||||
.@{col-prefix-cls}-pull-@{index} {
|
.@{col-prefix-cls}@{class}-pull-@{index} {
|
||||||
right: percentage((@index / @grid-columns));
|
right: percentage((@index / @grid-columns));
|
||||||
}
|
}
|
||||||
.@{col-prefix-cls}-offset-@{index} {
|
.@{col-prefix-cls}@{class}-offset-@{index} {
|
||||||
margin-left: percentage((@index / @grid-columns));
|
margin-left: percentage((@index / @grid-columns));
|
||||||
}
|
}
|
||||||
.@{col-prefix-cls}-order-@{index} {
|
.@{col-prefix-cls}@{class}-order-@{index} {
|
||||||
order: @index;
|
order: @index;
|
||||||
}
|
}
|
||||||
.loop-grid-columns((@index - 1));
|
.loop-grid-columns((@index - 1), @class);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loop-grid-columns(@index) when (@index = 0) {
|
.loop-grid-columns(@index, @class) when (@index = 0) {
|
||||||
.@{col-prefix-cls}-@{index} {
|
.@{col-prefix-cls}@{class}-@{index} {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.@{col-prefix-cls}-push-@{index} {
|
.@{col-prefix-cls}-push-@{index} {
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.make-grid() {
|
.make-grid(@class: ~'') {
|
||||||
.float-grid-columns();
|
.float-grid-columns(@class);
|
||||||
.loop-grid-columns(@grid-columns);
|
.loop-grid-columns(@grid-columns, @class);
|
||||||
}
|
}
|
||||||
|
|
@ -112,6 +112,27 @@
|
||||||
// Tag
|
// Tag
|
||||||
@tag-font-size : 12px;
|
@tag-font-size : 12px;
|
||||||
|
|
||||||
|
// Media queries breakpoints
|
||||||
|
// Extra small screen / phone
|
||||||
|
@screen-xs : 480px;
|
||||||
|
@screen-xs-min : @screen-xs;
|
||||||
|
@screen-xs-max : (@screen-xs-min - 1);
|
||||||
|
|
||||||
|
// Small screen / tablet
|
||||||
|
@screen-sm : 768px;
|
||||||
|
@screen-sm-min : @screen-sm;
|
||||||
|
@screen-sm-max : (@screen-sm-min - 1);
|
||||||
|
|
||||||
|
// Medium screen / desktop
|
||||||
|
@screen-md : 992px;
|
||||||
|
@screen-md-min : @screen-md;
|
||||||
|
@screen-md-max : (@screen-md-min - 1);
|
||||||
|
|
||||||
|
// Large screen / wide desktop
|
||||||
|
@screen-lg : 1200px;
|
||||||
|
@screen-lg-min : @screen-lg;
|
||||||
|
@screen-lg-max : (@screen-lg-min - 1);
|
||||||
|
|
||||||
// Z-index
|
// Z-index
|
||||||
@zindex-spin : 8;
|
@zindex-spin : 8;
|
||||||
@zindex-affix : 10;
|
@zindex-affix : 10;
|
||||||
|
|
|
||||||
|
|
@ -1,133 +1,30 @@
|
||||||
<style scoped>
|
<style>
|
||||||
/*body{*/
|
.ivu-col div.aaaaa{
|
||||||
/*padding: 50px;*/
|
height: 100px;
|
||||||
/*height: 2000px;*/
|
line-height: 100px;
|
||||||
/*}*/
|
text-align: center;
|
||||||
.example-badge{
|
color: #fff;
|
||||||
width: 42px;
|
background: rgba(0, 153, 229, .9);
|
||||||
height: 42px;
|
}
|
||||||
border-radius: 6px;
|
.ivu-col:nth-child(odd) div.aaaaa{
|
||||||
background: #eee;
|
background: rgba(0, 153, 229, .7);
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
|
<Row>
|
||||||
<Badge count="10">
|
<i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 1</div></i-col>
|
||||||
<a class="example-badge"></a>
|
<i-col :xs="20" :sm="16" :md="12" :lg="8"><div class="aaaaa">Col 2</div></i-col>
|
||||||
</Badge>
|
<i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 3</div></i-col>
|
||||||
|
</Row>
|
||||||
<Tag color="green" closable @on-close="closed">管理员</Tag>
|
|
||||||
<Progress :percent="50" status="active" :stroke-width="20">
|
|
||||||
|
|
||||||
</Progress>
|
|
||||||
|
|
||||||
<Circle :percent="p">
|
|
||||||
{{p}}%
|
|
||||||
</Circle>
|
|
||||||
<br><br>
|
<br><br>
|
||||||
<Timeline pending>
|
<Row>
|
||||||
<Timeline-item color="red">发布3.0版本</Timeline-item>
|
<i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 1</div></i-col>
|
||||||
<Timeline-item color="green">
|
<i-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 2</div></i-col>
|
||||||
<Icon type="cloak" slot="dot"></Icon>
|
<i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 3</div></i-col>
|
||||||
发布2.0版本
|
</Row>
|
||||||
</Timeline-item>
|
|
||||||
<Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
|
|
||||||
<Timeline-item>发布里程碑版本</Timeline-item>
|
|
||||||
</Timeline>
|
|
||||||
<br><br>
|
|
||||||
<Affix :offset-top="50" @on-change="affixChange">
|
|
||||||
<i-button>固定的图钉</i-button>
|
|
||||||
</Affix>
|
|
||||||
<Back-top @on-click="backtop">
|
|
||||||
|
|
||||||
</Back-top>
|
|
||||||
|
|
||||||
<div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">
|
|
||||||
<!--<Spin size="large" fix>加载中...</Spin>-->
|
|
||||||
<Spin size="large" fix v-if="spinShow">加载中...</Spin>
|
|
||||||
</div>
|
|
||||||
<div @click="spinShow = !spinShow">消失</div>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<i-button @click="nextStep">下一步</i-button>
|
|
||||||
<i-button @click="step_status = 'error'">步骤3切换为错误</i-button>
|
|
||||||
<i-button @click="step_process = 'error'">切换steps状态为error</i-button>
|
|
||||||
<Breadcrumb separator="<b>=></b>">
|
|
||||||
<Breadcrumb-item href="/index">首页</Breadcrumb-item>
|
|
||||||
<Breadcrumb-item href="/my">我的</Breadcrumb-item>
|
|
||||||
<Breadcrumb-item>
|
|
||||||
<Icon type="photo"></Icon>照片
|
|
||||||
</Breadcrumb-item>
|
|
||||||
</Breadcrumb>
|
|
||||||
<br>
|
|
||||||
<Steps :current="1" status="error">
|
|
||||||
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
|
|
||||||
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
|
|
||||||
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
|
||||||
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
|
|
||||||
</Steps>
|
|
||||||
<i-button @click="testStatus = 'process'">change Status</i-button>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, iButton, BackTop, Spin, Steps, Breadcrumb} from 'iview';
|
|
||||||
const TimelineItem = Timeline.Item;
|
|
||||||
const Step = Steps.Step;
|
|
||||||
const BreadcrumbItem = Breadcrumb.Item;
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
Badge,
|
|
||||||
Tag,
|
|
||||||
Progress,
|
|
||||||
Circle,
|
|
||||||
Timeline,
|
|
||||||
TimelineItem,
|
|
||||||
Icon,
|
|
||||||
Affix,
|
|
||||||
iButton,
|
|
||||||
BackTop,
|
|
||||||
Spin,
|
|
||||||
Steps,
|
|
||||||
Step,
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
total: 512,
|
|
||||||
p: 50,
|
|
||||||
step_current: 0,
|
|
||||||
step_status: 'wait',
|
|
||||||
step_process: 'process',
|
|
||||||
spinShow: true,
|
|
||||||
testStatus: 'wait'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
closed (e) {
|
|
||||||
console.log(e)
|
|
||||||
},
|
|
||||||
affixChange (status) {
|
|
||||||
console.log(status)
|
|
||||||
},
|
|
||||||
backtop () {
|
|
||||||
console.log('toppp')
|
|
||||||
},
|
|
||||||
nextStep () {
|
|
||||||
this.step_current += 1;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ready () {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.p = 60;
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,157 +1,279 @@
|
||||||
<template>
|
<template>
|
||||||
<i-button @click="down">down</i-button>
|
<i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>
|
||||||
<checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
|
<br>
|
||||||
<checkbox value="show">展示</checkbox>
|
<i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
|
||||||
<checkbox value="weak">唤醒</checkbox>
|
<i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button>
|
||||||
<checkbox value="signin">登录</checkbox>
|
<i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button>
|
||||||
<checkbox value="click">点击</checkbox>
|
|
||||||
<checkbox value="active">激活</checkbox>
|
|
||||||
<checkbox value="day7">7日留存</checkbox>
|
|
||||||
<checkbox value="day30">30日留存</checkbox>
|
|
||||||
<checkbox value="tomorrow">次日留存</checkbox>
|
|
||||||
<checkbox value="day">日活跃</checkbox>
|
|
||||||
<checkbox value="week">周活跃</checkbox>
|
|
||||||
<checkbox value="month">月活跃</checkbox>
|
|
||||||
</checkbox-group>
|
|
||||||
<i-table :content="self" :data="tableData2" :columns="tableColumns2" border v-ref:table></i-table>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
self: this,
|
columns8: [
|
||||||
tableData2: this.mockTableData2(),
|
{
|
||||||
tableColumns2: [],
|
"title": "名称",
|
||||||
tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
|
"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: {
|
methods: {
|
||||||
mockTableData2 () {
|
exportData (type) {
|
||||||
let data = [];
|
if (type === 1) {
|
||||||
function getNum() {
|
this.$refs.table.exportCsv({
|
||||||
return Math.floor(Math.random () * 10000 + 1);
|
filename: '原始数据'
|
||||||
|
});
|
||||||
|
} 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)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
data.push({
|
|
||||||
name: '推广名称' + (i+1),
|
|
||||||
fav: 0,
|
|
||||||
show: getNum(),
|
|
||||||
weak: getNum(),
|
|
||||||
signin: getNum(),
|
|
||||||
click: getNum(),
|
|
||||||
active: getNum(),
|
|
||||||
day7: getNum(),
|
|
||||||
day30: getNum(),
|
|
||||||
tomorrow: getNum(),
|
|
||||||
day: getNum(),
|
|
||||||
week: getNum(),
|
|
||||||
month: getNum()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
getTable2Columns () {
|
|
||||||
const table2ColumnList = {
|
|
||||||
name: {
|
|
||||||
title: '名称',
|
|
||||||
key: 'name',
|
|
||||||
fixed: 'left',
|
|
||||||
width: 200,
|
|
||||||
render (row, column, index) {
|
|
||||||
return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
|
|
||||||
<Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
|
|
||||||
<span>${row.name}</span>`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
title: '展示',
|
|
||||||
key: 'show',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
weak: {
|
|
||||||
title: '唤醒',
|
|
||||||
key: 'weak',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
signin: {
|
|
||||||
title: '登录',
|
|
||||||
key: 'signin',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
click: {
|
|
||||||
title: '点击',
|
|
||||||
key: 'click',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
title: '激活',
|
|
||||||
key: 'active',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
day7: {
|
|
||||||
title: '7日留存',
|
|
||||||
key: 'day7',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
day30: {
|
|
||||||
title: '30日留存',
|
|
||||||
key: 'day30',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
tomorrow: {
|
|
||||||
title: '次日留存',
|
|
||||||
key: 'tomorrow',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
day: {
|
|
||||||
title: '日活跃',
|
|
||||||
key: 'day',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
week: {
|
|
||||||
title: '周活跃',
|
|
||||||
key: 'week',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
month: {
|
|
||||||
title: '月活跃',
|
|
||||||
key: 'month',
|
|
||||||
width: 150,
|
|
||||||
sortable: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let data = [table2ColumnList.name];
|
|
||||||
|
|
||||||
this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
|
|
||||||
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
changeTableColumns () {
|
|
||||||
this.tableColumns2 = this.getTable2Columns();
|
|
||||||
},
|
|
||||||
toggleFav (index) {
|
|
||||||
this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
|
|
||||||
},
|
|
||||||
down () {
|
|
||||||
this.$refs.table.exportCsv({
|
|
||||||
filename: '2132',
|
|
||||||
original: false
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
ready () {
|
|
||||||
this.changeTableColumns();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue