701 lines
27 KiB
Vue
701 lines
27 KiB
Vue
<!--<template>-->
|
|
<!--<div>-->
|
|
<!--<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">-->
|
|
<!--<div slot="loading">-->
|
|
<!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
|
|
<!--<div>Loading</div>-->
|
|
<!--</div>-->
|
|
<!--</Table>-->
|
|
<!--<br><br>-->
|
|
<!--<Button @click="handleClear">clear</Button>-->
|
|
<!--<Button @click="loading = !loading">Loading</Button>-->
|
|
<!--</div>-->
|
|
<!--</template>-->
|
|
<!--<script>-->
|
|
<!--export default {-->
|
|
<!--data () {-->
|
|
<!--return {-->
|
|
<!--loading: false,-->
|
|
<!--columns3: [-->
|
|
<!--{-->
|
|
<!--title: '姓名',-->
|
|
<!--key: 'name',-->
|
|
<!--width: 100,-->
|
|
<!--fixed: 'left'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '年龄',-->
|
|
<!--key: 'age',-->
|
|
<!--width: 100-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '省份',-->
|
|
<!--key: 'province',-->
|
|
<!--width: 100-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '市区',-->
|
|
<!--key: 'city',-->
|
|
<!--width: 100-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '地址',-->
|
|
<!--key: 'address',-->
|
|
<!--width: 200-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '邮编',-->
|
|
<!--key: 'zip',-->
|
|
<!--width: 100-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '操作',-->
|
|
<!--key: 'action',-->
|
|
<!--fixed: 'right',-->
|
|
<!--width: 120,-->
|
|
<!--render: (h, params) => {-->
|
|
<!--return h('div', [-->
|
|
<!--h('Button', {-->
|
|
<!--props: {-->
|
|
<!--type: 'text',-->
|
|
<!--size: 'small'-->
|
|
<!--}-->
|
|
<!--}, '查看'),-->
|
|
<!--h('Button', {-->
|
|
<!--props: {-->
|
|
<!--type: 'text',-->
|
|
<!--size: 'small'-->
|
|
<!--}-->
|
|
<!--}, '编辑')-->
|
|
<!--]);-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--data1: [-->
|
|
<!--{-->
|
|
<!--name: '王小明',-->
|
|
<!--age: 18,-->
|
|
<!--address: '北京市朝阳区芍药居'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '张小刚',-->
|
|
<!--age: 25,-->
|
|
<!--address: '北京市海淀区西二旗'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '李小红',-->
|
|
<!--age: 30,-->
|
|
<!--address: '上海市浦东新区世纪大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '周小伟',-->
|
|
<!--age: 26,-->
|
|
<!--address: '深圳市南山区深南大道'-->
|
|
<!--}-->
|
|
<!--]-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--methods: {-->
|
|
<!--handleClear () {-->
|
|
<!--this.$refs.table.clearCurrentRow();-->
|
|
<!--},-->
|
|
<!--handleChange (newData, oldData) {-->
|
|
<!--// console.log(newData, oldData)-->
|
|
<!--},-->
|
|
<!--rc (data, index) {-->
|
|
<!--console.log(data, index);-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--</script>-->
|
|
|
|
<!--<style scoped>-->
|
|
<!--.layout{-->
|
|
<!--border: 1px solid #d7dde4;-->
|
|
<!--background: #f5f7f9;-->
|
|
<!--position: relative;-->
|
|
<!--border-radius: 4px;-->
|
|
<!--overflow: hidden;-->
|
|
<!--}-->
|
|
<!--.layout-breadcrumb{-->
|
|
<!--padding: 10px 15px 0;-->
|
|
<!--}-->
|
|
<!--.layout-content{-->
|
|
<!--min-height: 200px;-->
|
|
<!--margin: 15px;-->
|
|
<!--overflow: hidden;-->
|
|
<!--background: #fff;-->
|
|
<!--border-radius: 4px;-->
|
|
<!--}-->
|
|
<!--.layout-content-main{-->
|
|
<!--padding: 10px;-->
|
|
<!--}-->
|
|
<!--.layout-copy{-->
|
|
<!--text-align: center;-->
|
|
<!--padding: 10px 0 20px;-->
|
|
<!--color: #9ea7b4;-->
|
|
<!--}-->
|
|
<!--.layout-menu-left{-->
|
|
<!--background: #464c5b;-->
|
|
<!--}-->
|
|
<!--.layout-header{-->
|
|
<!--height: 60px;-->
|
|
<!--background: #fff;-->
|
|
<!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->
|
|
<!--}-->
|
|
<!--.layout-logo-left{-->
|
|
<!--width: 90%;-->
|
|
<!--height: 30px;-->
|
|
<!--background: #5b6270;-->
|
|
<!--border-radius: 3px;-->
|
|
<!--margin: 15px auto;-->
|
|
<!--}-->
|
|
<!--.layout-ceiling-main a{-->
|
|
<!--color: #9ba7b5;-->
|
|
<!--}-->
|
|
<!--.layout-hide-text .layout-text{-->
|
|
<!--display: none;-->
|
|
<!--}-->
|
|
<!--.ivu-col{-->
|
|
<!--/*transition: width .2s ease-in-out;*/-->
|
|
<!--}-->
|
|
<!--</style>-->
|
|
<!--<template>-->
|
|
<!--<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">-->
|
|
<!--<Row type="flex">-->
|
|
<!--<Col :span="spanLeft" class="layout-menu-left">-->
|
|
<!--<Menu active-name="1" theme="dark" width="auto">-->
|
|
<!--<div class="layout-logo-left"></div>-->
|
|
<!--<MenuItem name="1">-->
|
|
<!--<Icon type="ios-navigate" :size="iconSize"></Icon>-->
|
|
<!--<span class="layout-text">选项 1</span>-->
|
|
<!--</MenuItem>-->
|
|
<!--<MenuItem name="2">-->
|
|
<!--<Icon type="ios-keypad" :size="iconSize"></Icon>-->
|
|
<!--<span class="layout-text">选项 2</span>-->
|
|
<!--</MenuItem>-->
|
|
<!--<MenuItem name="3">-->
|
|
<!--<Icon type="ios-analytics" :size="iconSize"></Icon>-->
|
|
<!--<span class="layout-text">选项 3</span>-->
|
|
<!--</MenuItem>-->
|
|
<!--</Menu>-->
|
|
<!--</Col>-->
|
|
<!--<Col :span="spanRight">-->
|
|
<!--<div class="layout-header">-->
|
|
<!--<Button type="text" @click="toggleClick">-->
|
|
<!--<Icon type="navicon" size="32"></Icon>-->
|
|
<!--</Button>-->
|
|
<!--</div>-->
|
|
<!--<div class="layout-breadcrumb">-->
|
|
<!--<Breadcrumb>-->
|
|
<!--<BreadcrumbItem href="#">首页</BreadcrumbItem>-->
|
|
<!--<BreadcrumbItem href="#">应用中心</BreadcrumbItem>-->
|
|
<!--<BreadcrumbItem>某应用</BreadcrumbItem>-->
|
|
<!--</Breadcrumb>-->
|
|
<!--</div>-->
|
|
<!--<div class="layout-content">-->
|
|
<!--<div class="layout-content-main">-->
|
|
<!--<Table stripe :columns="columns1" :data="data1"></Table>-->
|
|
<!--</div>-->
|
|
<!--<hr style="margin: 10px 0;" />-->
|
|
<!--<div class="layout-content-main">-->
|
|
<!--<Table stripe :columns="columns2" :data="data2" ref="csvTable" @on-row-click="cc" />-->
|
|
<!--<i-button type="primary" size="large" @click="exportCSV">-->
|
|
<!--<icon type="ios-download-outline"></icon> Export to CSV-->
|
|
<!--</i-button>-->
|
|
<!--</div>-->
|
|
<!--</div>-->
|
|
<!--</Col>-->
|
|
<!--</Row>-->
|
|
<!--</div>-->
|
|
<!--</template>-->
|
|
<!--<script>-->
|
|
<!--export default {-->
|
|
<!--data () {-->
|
|
<!--return {-->
|
|
<!--spanLeft: 5,-->
|
|
<!--spanRight: 19,-->
|
|
<!--columns1: [-->
|
|
<!--{-->
|
|
<!--title: '姓名',-->
|
|
<!--key: 'name'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '年龄',-->
|
|
<!--key: 'age'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '地址',-->
|
|
<!--key: 'address'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '姓名',-->
|
|
<!--key: 'name'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '年龄',-->
|
|
<!--key: 'age'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '地址',-->
|
|
<!--key: 'address'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '姓名',-->
|
|
<!--key: 'name'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '年龄',-->
|
|
<!--key: 'age'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '地址',-->
|
|
<!--key: 'address'-->
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--data1: [-->
|
|
<!--{-->
|
|
<!--name: '王小明',-->
|
|
<!--age: 18,-->
|
|
<!--address: '北京市朝阳区芍药居'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '张小刚',-->
|
|
<!--age: 25,-->
|
|
<!--address: '北京市海淀区西二旗'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '李小红',-->
|
|
<!--age: 30,-->
|
|
<!--address: '上海市浦东新区世纪大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '周小伟',-->
|
|
<!--age: 26,-->
|
|
<!--address: '深圳市南山区深南大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '王小明',-->
|
|
<!--age: 18,-->
|
|
<!--address: '北京市朝阳区芍药居'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '张小刚',-->
|
|
<!--age: 25,-->
|
|
<!--address: '北京市海淀区西二旗'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '李小红',-->
|
|
<!--age: 30,-->
|
|
<!--address: '上海市浦东新区世纪大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '周小伟',-->
|
|
<!--age: 26,-->
|
|
<!--address: '深圳市南山区深南大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '王小明',-->
|
|
<!--age: 18,-->
|
|
<!--address: '北京市朝阳区芍药居'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '张小刚',-->
|
|
<!--age: 25,-->
|
|
<!--address: '北京市海淀区西二旗'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '李小红',-->
|
|
<!--age: 30,-->
|
|
<!--address: '上海市浦东新区世纪大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '周小伟',-->
|
|
<!--age: 26,-->
|
|
<!--address: '深圳市南山区深南大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '王小明',-->
|
|
<!--age: 18,-->
|
|
<!--address: '北京市朝阳区芍药居'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '张小刚',-->
|
|
<!--age: 25,-->
|
|
<!--address: '北京市海淀区西二旗'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '李小红',-->
|
|
<!--age: 30,-->
|
|
<!--address: '上海市浦东新区世纪大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '周小伟',-->
|
|
<!--age: 26,-->
|
|
<!--address: '深圳市南山区深南大道'-->
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--columns2: [-->
|
|
<!--{-->
|
|
<!--title: '姓名',-->
|
|
<!--key: 'name'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '年龄',-->
|
|
<!--key: 'age'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--title: '地址',-->
|
|
<!--key: 'address',-->
|
|
<!--render: (h) => {-->
|
|
<!--return h('Button', {-->
|
|
<!--nativeOn: {-->
|
|
<!--click: (event) => {-->
|
|
<!--console.log(2)-->
|
|
<!--event.stopPropagation();-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--}, 'click')-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--],-->
|
|
<!--data2: [-->
|
|
<!--{-->
|
|
<!--name: '王小明',-->
|
|
<!--age: 18,-->
|
|
<!--address: '北京市朝\n阳区芍药居'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '张小刚',-->
|
|
<!--age: 25,-->
|
|
<!--address: '北京市海,淀区西二旗'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '李小红',-->
|
|
<!--age: 30,-->
|
|
<!--address: '上海市浦东\r新区世纪大道'-->
|
|
<!--},-->
|
|
<!--{-->
|
|
<!--name: '周小伟',-->
|
|
<!--age: 26,-->
|
|
<!--address: '深圳市南山区深南大道'-->
|
|
<!--}-->
|
|
<!--]-->
|
|
<!--};-->
|
|
<!--},-->
|
|
<!--computed: {-->
|
|
<!--iconSize () {-->
|
|
<!--return this.spanLeft === 5 ? 14 : 24;-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--methods: {-->
|
|
<!--toggleClick () {-->
|
|
<!--if (this.spanLeft === 5) {-->
|
|
<!--this.spanLeft = 2;-->
|
|
<!--this.spanRight = 22;-->
|
|
<!--} else {-->
|
|
<!--this.spanLeft = 5;-->
|
|
<!--this.spanRight = 19;-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--exportCSV () {-->
|
|
<!--this.$refs.csvTable.exportCsv({-->
|
|
<!--filename: '原始数据',-->
|
|
<!--separator: ';',-->
|
|
<!--quoted: true-->
|
|
<!--});-->
|
|
<!--},-->
|
|
<!--cc () {-->
|
|
<!--console.log(1)-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--};-->
|
|
<!--</script>-->
|
|
|
|
<template>
|
|
<div>
|
|
<Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
|
|
<br>
|
|
<Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
|
|
<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
|
|
<Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
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: {
|
|
exportData (type) {
|
|
if (type === 1) {
|
|
this.$refs.table.exportCsv({
|
|
filename: '原始数据',
|
|
separator: ';',
|
|
quoted: true,
|
|
callback (data) {
|
|
console.log(data);
|
|
}
|
|
});
|
|
} 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)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|