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,157 +1,279 @@
|
|||
<template>
|
||||
<i-button @click="down">down</i-button>
|
||||
<checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
|
||||
<checkbox value="show">展示</checkbox>
|
||||
<checkbox value="weak">唤醒</checkbox>
|
||||
<checkbox value="signin">登录</checkbox>
|
||||
<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>
|
||||
<i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>
|
||||
<br>
|
||||
<i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
|
||||
<i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button>
|
||||
<i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
tableData2: this.mockTableData2(),
|
||||
tableColumns2: [],
|
||||
tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
|
||||
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: {
|
||||
mockTableData2 () {
|
||||
let data = [];
|
||||
function getNum() {
|
||||
return Math.floor(Math.random () * 10000 + 1);
|
||||
exportData (type) {
|
||||
if (type === 1) {
|
||||
this.$refs.table.exportCsv({
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue