chenhaodong / mew-iview

Commit 84a351dfdcedda56a1fbcf0e263a2f81e9e3d3e2

Authored by 梁灏
1 parent 43509ad8

Layout support reponsive 

Layout support reponsive
Showing 7 changed files with 380 additions and 285 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.10-rc-3", 3 + "version": "0.9.10-rc-4",
4 "title": "iView", 4 "title": "iView",
5 "description": "A high quality UI components Library with Vue.js", 5 "description": "A high quality UI components Library with Vue.js",
6 "homepage": "http://www.iviewui.com", 6 "homepage": "http://www.iviewui.com",
src/components/layout/col.vue
  Show/Hide comments   View file @84a351d
@@ -15,7 +15,11 @@ @@ -15,7 +15,11 @@
15 offset: [Number, String], 15 offset: [Number, String],
16 push: [Number, String], 16 push: [Number, String],
17 pull: [Number, String], 17 pull: [Number, String],
18 - className: String 18 + className: String,
  19 + xs: [Number, Object],
  20 + sm: [Number, Object],
  21 + md: [Number, Object],
  22 + lg: [Number, Object]
19 }, 23 },
20 data () { 24 data () {
21 return { 25 return {
@@ -24,7 +28,7 @@ @@ -24,7 +28,7 @@
24 }, 28 },
25 computed: { 29 computed: {
26 classes () { 30 classes () {
27 - return [ 31 + let classList = [
28 `${prefixCls}`, 32 `${prefixCls}`,
29 { 33 {
30 [`${prefixCls}-span-${this.span}`]: this.span, 34 [`${prefixCls}-span-${this.span}`]: this.span,
@@ -34,7 +38,24 @@ @@ -34,7 +38,24 @@
34 [`${prefixCls}-pull-${this.pull}`]: this.pull, 38 [`${prefixCls}-pull-${this.pull}`]: this.pull,
35 [`${this.className}`]: !!this.className 39 [`${this.className}`]: !!this.className
36 } 40 }
37 - ] 41 + ];
  42 +
  43 + ['xs', 'sm', 'md', 'lg'].forEach(size => {
  44 + if (typeof this[size] === 'number') {
  45 + classList.push(`${prefixCls}-span-${size}-${this[size]}`);
  46 + } else if (typeof this[size] === 'object') {
  47 + let props = this[size];
  48 + Object.keys(props).forEach(prop => {
  49 + classList.push(
  50 + prop !== 'span'
  51 + ? `${prefixCls}-${size}-${prop}-${props[prop]}`
  52 + : `${prefixCls}-span-${size}-${props[prop]}`
  53 + );
  54 + });
  55 + }
  56 + });
  57 +
  58 + return classList;
38 }, 59 },
39 styles () { 60 styles () {
40 let style = {}; 61 let style = {};
src/styles/common/layout.less
  Show/Hide comments   View file @84a351d
@@ -52,3 +52,37 @@ @@ -52,3 +52,37 @@
52 } 52 }
53 53
54 .make-grid(); 54 .make-grid();
  55 +
  56 +// Extra small grid
  57 +//
  58 +// Columns, offsets, pushes, and pulls for extra small devices like
  59 +// smartphones.
  60 +
  61 +.make-grid(-xs);
  62 +
  63 +// Small grid
  64 +//
  65 +// Columns, offsets, pushes, and pulls for the small device range, from phones
  66 +// to tablets.
  67 +
  68 +@media (min-width: @screen-sm-min) {
  69 + .make-grid(-sm);
  70 +}
  71 +
  72 +
  73 +// Medium grid
  74 +//
  75 +// Columns, offsets, pushes, and pulls for the desktop device range.
  76 +
  77 +@media (min-width: @screen-md-min) {
  78 + .make-grid(-md);
  79 +}
  80 +
  81 +
  82 +// Large grid
  83 +//
  84 +// Columns, offsets, pushes, and pulls for the large desktop device range.
  85 +
  86 +@media (min-width: @screen-lg-min) {
  87 + .make-grid(-lg);
  88 +}
src/styles/mixins/layout.less
  Show/Hide comments   View file @84a351d
@@ -9,13 +9,13 @@ @@ -9,13 +9,13 @@
9 .clearfix; 9 .clearfix;
10 } 10 }
11 11
12 -.float-grid-columns() { 12 +.float-grid-columns(@class) {
13 .col(@index) { // initial 13 .col(@index) { // initial
14 - @item: ~".@{col-prefix-cls}-span-@{index}"; 14 + @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
15 .col((@index + 1), @item); 15 .col((@index + 1), @item);
16 } 16 }
17 .col(@index, @list) when (@index =< @grid-columns) { // general 17 .col(@index, @list) when (@index =< @grid-columns) { // general
18 - @item: ~".@{col-prefix-cls}-span-@{index}"; 18 + @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
19 .col((@index + 1), ~"@{list}, @{item}"); 19 .col((@index + 1), ~"@{list}, @{item}");
20 } 20 }
21 .col(@index, @list) when (@index > @grid-columns) { // terminal 21 .col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -27,28 +27,28 @@ @@ -27,28 +27,28 @@
27 .col(1); // kickstart it 27 .col(1); // kickstart it
28 } 28 }
29 29
30 -.loop-grid-columns(@index) when (@index > 0) {  
31 - .@{col-prefix-cls}-span-@{index} { 30 +.loop-grid-columns(@index, @class) when (@index > 0) {
  31 + .@{col-prefix-cls}-span@{class}-@{index} {
32 display: block; 32 display: block;
33 width: percentage((@index / @grid-columns)); 33 width: percentage((@index / @grid-columns));
34 } 34 }
35 - .@{col-prefix-cls}-push-@{index} { 35 + .@{col-prefix-cls}@{class}-push-@{index} {
36 left: percentage((@index / @grid-columns)); 36 left: percentage((@index / @grid-columns));
37 } 37 }
38 - .@{col-prefix-cls}-pull-@{index} { 38 + .@{col-prefix-cls}@{class}-pull-@{index} {
39 right: percentage((@index / @grid-columns)); 39 right: percentage((@index / @grid-columns));
40 } 40 }
41 - .@{col-prefix-cls}-offset-@{index} { 41 + .@{col-prefix-cls}@{class}-offset-@{index} {
42 margin-left: percentage((@index / @grid-columns)); 42 margin-left: percentage((@index / @grid-columns));
43 } 43 }
44 - .@{col-prefix-cls}-order-@{index} { 44 + .@{col-prefix-cls}@{class}-order-@{index} {
45 order: @index; 45 order: @index;
46 } 46 }
47 - .loop-grid-columns((@index - 1)); 47 + .loop-grid-columns((@index - 1), @class);
48 } 48 }
49 49
50 -.loop-grid-columns(@index) when (@index = 0) {  
51 - .@{col-prefix-cls}-@{index} { 50 +.loop-grid-columns(@index, @class) when (@index = 0) {
  51 + .@{col-prefix-cls}@{class}-@{index} {
52 display: none; 52 display: none;
53 } 53 }
54 .@{col-prefix-cls}-push-@{index} { 54 .@{col-prefix-cls}-push-@{index} {
@@ -59,7 +59,7 @@ @@ -59,7 +59,7 @@
59 } 59 }
60 } 60 }
61 61
62 -.make-grid() {  
63 - .float-grid-columns();  
64 - .loop-grid-columns(@grid-columns); 62 +.make-grid(@class: ~'') {
  63 + .float-grid-columns(@class);
  64 + .loop-grid-columns(@grid-columns, @class);
65 } 65 }
66 \ No newline at end of file 66 \ No newline at end of file
src/styles/themes/default/custom.less
  Show/Hide comments   View file @84a351d
@@ -112,6 +112,27 @@ @@ -112,6 +112,27 @@
112 // Tag 112 // Tag
113 @tag-font-size : 12px; 113 @tag-font-size : 12px;
114 114
  115 +// Media queries breakpoints
  116 +// Extra small screen / phone
  117 +@screen-xs : 480px;
  118 +@screen-xs-min : @screen-xs;
  119 +@screen-xs-max : (@screen-xs-min - 1);
  120 +
  121 +// Small screen / tablet
  122 +@screen-sm : 768px;
  123 +@screen-sm-min : @screen-sm;
  124 +@screen-sm-max : (@screen-sm-min - 1);
  125 +
  126 +// Medium screen / desktop
  127 +@screen-md : 992px;
  128 +@screen-md-min : @screen-md;
  129 +@screen-md-max : (@screen-md-min - 1);
  130 +
  131 +// Large screen / wide desktop
  132 +@screen-lg : 1200px;
  133 +@screen-lg-min : @screen-lg;
  134 +@screen-lg-max : (@screen-lg-min - 1);
  135 +
115 // Z-index 136 // Z-index
116 @zindex-spin : 8; 137 @zindex-spin : 8;
117 @zindex-affix : 10; 138 @zindex-affix : 10;
test/routers/more.vue
  Show/Hide comments   View file @84a351d
1 -<style scoped>  
2 - /*body{*/  
3 - /*padding: 50px;*/  
4 - /*height: 2000px;*/  
5 - /*}*/  
6 - .example-badge{  
7 - width: 42px;  
8 - height: 42px;  
9 - border-radius: 6px;  
10 - background: #eee;  
11 - display: inline-block; 1 +<style>
  2 + .ivu-col div.aaaaa{
  3 + height: 100px;
  4 + line-height: 100px;
  5 + text-align: center;
  6 + color: #fff;
  7 + background: rgba(0, 153, 229, .9);
  8 + }
  9 + .ivu-col:nth-child(odd) div.aaaaa{
  10 + background: rgba(0, 153, 229, .7);
12 } 11 }
13 </style> 12 </style>
14 <template> 13 <template>
15 -  
16 - <Badge count="10">  
17 - <a class="example-badge"></a>  
18 - </Badge>  
19 -  
20 - <Tag color="green" closable @on-close="closed">管理员</Tag>  
21 - <Progress :percent="50" status="active" :stroke-width="20">  
22 -  
23 - </Progress>  
24 -  
25 - <Circle :percent="p">  
26 - {{p}}%  
27 - </Circle>  
28 - <br><br>  
29 - <Timeline pending>  
30 - <Timeline-item color="red">发布3.0版本</Timeline-item>  
31 - <Timeline-item color="green">  
32 - <Icon type="cloak" slot="dot"></Icon>  
33 - 发布2.0版本  
34 - </Timeline-item>  
35 - <Timeline-item color="#ff6600">发布1.0版本</Timeline-item>  
36 - <Timeline-item>发布里程碑版本</Timeline-item>  
37 - </Timeline> 14 + <Row>
  15 + <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 1</div></i-col>
  16 + <i-col :xs="20" :sm="16" :md="12" :lg="8"><div class="aaaaa">Col 2</div></i-col>
  17 + <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 3</div></i-col>
  18 + </Row>
38 <br><br> 19 <br><br>
39 - <Affix :offset-top="50" @on-change="affixChange">  
40 - <i-button>固定的图钉</i-button>  
41 - </Affix>  
42 - <Back-top @on-click="backtop">  
43 -  
44 - </Back-top>  
45 -  
46 - <div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">  
47 - <!--<Spin size="large" fix>加载中...</Spin>-->  
48 - <Spin size="large" fix v-if="spinShow">加载中...</Spin>  
49 - </div>  
50 - <div @click="spinShow = !spinShow">消失</div>  
51 - <br><br>  
52 -  
53 - <i-button @click="nextStep">下一步</i-button>  
54 - <i-button @click="step_status = 'error'">步骤3切换为错误</i-button>  
55 - <i-button @click="step_process = 'error'">切换steps状态为error</i-button>  
56 - <Breadcrumb separator="<b>=></b>">  
57 - <Breadcrumb-item href="/index">首页</Breadcrumb-item>  
58 - <Breadcrumb-item href="/my">我的</Breadcrumb-item>  
59 - <Breadcrumb-item>  
60 - <Icon type="photo"></Icon>照片  
61 - </Breadcrumb-item>  
62 - </Breadcrumb>  
63 - <br>  
64 - <Steps :current="1" status="error">  
65 - <Step title="已完成" content="这里是该步骤的描述信息"></Step>  
66 - <Step title="进行中" content="这里是该步骤的描述信息"></Step>  
67 - <Step title="待进行" content="这里是该步骤的描述信息"></Step>  
68 - <Step title="待进行" content="这里是该步骤的描述信息"></Step>  
69 - </Steps>  
70 - <i-button @click="testStatus = 'process'">change Status</i-button> 20 + <Row>
  21 + <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 1</div></i-col>
  22 + <i-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 2</div></i-col>
  23 + <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 3</div></i-col>
  24 + </Row>
71 </template> 25 </template>
72 <script> 26 <script>
73 - import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, iButton, BackTop, Spin, Steps, Breadcrumb} from 'iview';  
74 - const TimelineItem = Timeline.Item;  
75 - const Step = Steps.Step;  
76 - const BreadcrumbItem = Breadcrumb.Item;  
77 -  
78 export default { 27 export default {
79 - components: {  
80 - Badge,  
81 - Tag,  
82 - Progress,  
83 - Circle,  
84 - Timeline,  
85 - TimelineItem,  
86 - Icon,  
87 - Affix,  
88 - iButton,  
89 - BackTop,  
90 - Spin,  
91 - Steps,  
92 - Step,  
93 - Breadcrumb,  
94 - BreadcrumbItem  
95 - },  
96 - props: {  
97 -  
98 - },  
99 - data () {  
100 - return {  
101 - total: 512,  
102 - p: 50,  
103 - step_current: 0,  
104 - step_status: 'wait',  
105 - step_process: 'process',  
106 - spinShow: true,  
107 - testStatus: 'wait'  
108 - }  
109 - },  
110 - computed: {  
111 28
112 - },  
113 - methods: {  
114 - closed (e) {  
115 - console.log(e)  
116 - },  
117 - affixChange (status) {  
118 - console.log(status)  
119 - },  
120 - backtop () {  
121 - console.log('toppp')  
122 - },  
123 - nextStep () {  
124 - this.step_current += 1;  
125 - }  
126 - },  
127 - ready () {  
128 - setTimeout(() => {  
129 - this.p = 60;  
130 - }, 1000)  
131 - }  
132 } 29 }
133 </script> 30 </script>
test/routers/table.vue
  Show/Hide comments   View file @84a351d
1 <template> 1 <template>
2 - <i-button @click="down">down</i-button>  
3 - <checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">  
4 - <checkbox value="show">展示</checkbox>  
5 - <checkbox value="weak">唤醒</checkbox>  
6 - <checkbox value="signin">登录</checkbox>  
7 - <checkbox value="click">点击</checkbox>  
8 - <checkbox value="active">激活</checkbox>  
9 - <checkbox value="day7">7日留存</checkbox>  
10 - <checkbox value="day30">30日留存</checkbox>  
11 - <checkbox value="tomorrow">次日留存</checkbox>  
12 - <checkbox value="day">日活跃</checkbox>  
13 - <checkbox value="week">周活跃</checkbox>  
14 - <checkbox value="month">月活跃</checkbox>  
15 - </checkbox-group>  
16 - <i-table :content="self" :data="tableData2" :columns="tableColumns2" border v-ref:table></i-table> 2 + <i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>
  3 + <br>
  4 + <i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
  5 + <i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button>
  6 + <i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button>
17 </template> 7 </template>
18 <script> 8 <script>
19 export default { 9 export default {
20 data () { 10 data () {
21 return { 11 return {
22 - self: this,  
23 - tableData2: this.mockTableData2(),  
24 - tableColumns2: [],  
25 - tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']  
26 - }  
27 - },  
28 - methods: {  
29 - mockTableData2 () {  
30 - let data = [];  
31 - function getNum() {  
32 - return Math.floor(Math.random () * 10000 + 1);  
33 - }  
34 - for (let i = 0; i < 10; i++) {  
35 - data.push({  
36 - name: '推广名称' + (i+1),  
37 - fav: 0,  
38 - show: getNum(),  
39 - weak: getNum(),  
40 - signin: getNum(),  
41 - click: getNum(),  
42 - active: getNum(),  
43 - day7: getNum(),  
44 - day30: getNum(),  
45 - tomorrow: getNum(),  
46 - day: getNum(),  
47 - week: getNum(),  
48 - month: getNum()  
49 - })  
50 - }  
51 - return data;  
52 - },  
53 - getTable2Columns () {  
54 - const table2ColumnList = {  
55 - name: {  
56 - title: '名称',  
57 - key: 'name',  
58 - fixed: 'left',  
59 - width: 200,  
60 - render (row, column, index) {  
61 - return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>  
62 - <Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>  
63 - <span>${row.name}</span>`; 12 + columns8: [
  13 + {
  14 + "title": "名称",
  15 + "key": "name",
  16 + "fixed": "left",
  17 + "width": 200
  18 + },
  19 + {
  20 + "title": "展示",
  21 + "key": "show",
  22 + "width": 150,
  23 + "sortable": true,
  24 + filters: [
  25 + {
  26 + label: '大于4000',
  27 + value: 1
  28 + },
  29 + {
  30 + label: '小于4000',
  31 + value: 2
  32 + }
  33 + ],
  34 + filterMultiple: false,
  35 + filterMethod (value, row) {
  36 + if (value === 1) {
  37 + return row.show > 4000;
  38 + } else if (value === 2) {
  39 + return row.show < 4000;
  40 + }
64 } 41 }
65 }, 42 },
66 - show: {  
67 - title: '展示',  
68 - key: 'show',  
69 - width: 150,  
70 - sortable: true  
71 - },  
72 - weak: {  
73 - title: '唤醒',  
74 - key: 'weak',  
75 - width: 150,  
76 - sortable: true  
77 - },  
78 - signin: {  
79 - title: '登录',  
80 - key: 'signin',  
81 - width: 150,  
82 - sortable: true  
83 - },  
84 - click: {  
85 - title: '点击',  
86 - key: 'click',  
87 - width: 150,  
88 - sortable: true  
89 - },  
90 - active: {  
91 - title: '激活',  
92 - key: 'active',  
93 - width: 150,  
94 - sortable: true  
95 - },  
96 - day7: {  
97 - title: '7日留存',  
98 - key: 'day7',  
99 - width: 150,  
100 - sortable: true  
101 - },  
102 - day30: {  
103 - title: '30日留存',  
104 - key: 'day30',  
105 - width: 150,  
106 - sortable: true  
107 - },  
108 - tomorrow: {  
109 - title: '次日留存',  
110 - key: 'tomorrow',  
111 - width: 150,  
112 - sortable: true  
113 - },  
114 - day: {  
115 - title: '日活跃',  
116 - key: 'day',  
117 - width: 150,  
118 - sortable: true  
119 - },  
120 - week: {  
121 - title: '周活跃',  
122 - key: 'week',  
123 - width: 150,  
124 - sortable: true  
125 - },  
126 - month: {  
127 - title: '月活跃',  
128 - key: 'month',  
129 - width: 150,  
130 - sortable: true 43 + {
  44 + "title": "唤醒",
  45 + "key": "weak",
  46 + "width": 150,
  47 + "sortable": true
  48 + },
  49 + {
  50 + "title": "登录",
  51 + "key": "signin",
  52 + "width": 150,
  53 + "sortable": true
  54 + },
  55 + {
  56 + "title": "点击",
  57 + "key": "click",
  58 + "width": 150,
  59 + "sortable": true
  60 + },
  61 + {
  62 + "title": "激活",
  63 + "key": "active",
  64 + "width": 150,
  65 + "sortable": true
  66 + },
  67 + {
  68 + "title": "7日留存",
  69 + "key": "day7",
  70 + "width": 150,
  71 + "sortable": true
  72 + },
  73 + {
  74 + "title": "30日留存",
  75 + "key": "day30",
  76 + "width": 150,
  77 + "sortable": true
  78 + },
  79 + {
  80 + "title": "次日留存",
  81 + "key": "tomorrow",
  82 + "width": 150,
  83 + "sortable": true
  84 + },
  85 + {
  86 + "title": "日活跃",
  87 + "key": "day",
  88 + "width": 150,
  89 + "sortable": true
  90 + },
  91 + {
  92 + "title": "周活跃",
  93 + "key": "week",
  94 + "width": 150,
  95 + "sortable": true
  96 + },
  97 + {
  98 + "title": "月活跃",
  99 + "key": "month",
  100 + "width": 150,
  101 + "sortable": true
  102 + }
  103 + ],
  104 + data7: [
  105 + {
  106 + "name": "推广名称1",
  107 + "fav": 0,
  108 + "show": 7302,
  109 + "weak": 5627,
  110 + "signin": 1563,
  111 + "click": 4254,
  112 + "active": 1438,
  113 + "day7": 274,
  114 + "day30": 285,
  115 + "tomorrow": 1727,
  116 + "day": 558,
  117 + "week": 4440,
  118 + "month": 5610
  119 + },
  120 + {
  121 + "name": "推广名称2",
  122 + "fav": 0,
  123 + "show": 4720,
  124 + "weak": 4086,
  125 + "signin": 3792,
  126 + "click": 8690,
  127 + "active": 8470,
  128 + "day7": 8172,
  129 + "day30": 5197,
  130 + "tomorrow": 1684,
  131 + "day": 2593,
  132 + "week": 2507,
  133 + "month": 1537
  134 + },
  135 + {
  136 + "name": "推广名称3",
  137 + "fav": 0,
  138 + "show": 7181,
  139 + "weak": 8007,
  140 + "signin": 8477,
  141 + "click": 1879,
  142 + "active": 16,
  143 + "day7": 2249,
  144 + "day30": 3450,
  145 + "tomorrow": 377,
  146 + "day": 1561,
  147 + "week": 3219,
  148 + "month": 1588
  149 + },
  150 + {
  151 + "name": "推广名称4",
  152 + "fav": 0,
  153 + "show": 9911,
  154 + "weak": 8976,
  155 + "signin": 8807,
  156 + "click": 8050,
  157 + "active": 7668,
  158 + "day7": 1547,
  159 + "day30": 2357,
  160 + "tomorrow": 7278,
  161 + "day": 5309,
  162 + "week": 1655,
  163 + "month": 9043
  164 + },
  165 + {
  166 + "name": "推广名称5",
  167 + "fav": 0,
  168 + "show": 934,
  169 + "weak": 1394,
  170 + "signin": 6463,
  171 + "click": 5278,
  172 + "active": 9256,
  173 + "day7": 209,
  174 + "day30": 3563,
  175 + "tomorrow": 8285,
  176 + "day": 1230,
  177 + "week": 4840,
  178 + "month": 9908
  179 + },
  180 + {
  181 + "name": "推广名称6",
  182 + "fav": 0,
  183 + "show": 6856,
  184 + "weak": 1608,
  185 + "signin": 457,
  186 + "click": 4949,
  187 + "active": 2909,
  188 + "day7": 4525,
  189 + "day30": 6171,
  190 + "tomorrow": 1920,
  191 + "day": 1966,
  192 + "week": 904,
  193 + "month": 6851
  194 + },
  195 + {
  196 + "name": "推广名称7",
  197 + "fav": 0,
  198 + "show": 5107,
  199 + "weak": 6407,
  200 + "signin": 4166,
  201 + "click": 7970,
  202 + "active": 1002,
  203 + "day7": 8701,
  204 + "day30": 9040,
  205 + "tomorrow": 7632,
  206 + "day": 4061,
  207 + "week": 4359,
  208 + "month": 3676
  209 + },
  210 + {
  211 + "name": "推广名称8",
  212 + "fav": 0,
  213 + "show": 862,
  214 + "weak": 6520,
  215 + "signin": 6696,
  216 + "click": 3209,
  217 + "active": 6801,
  218 + "day7": 6364,
  219 + "day30": 6850,
  220 + "tomorrow": 9408,
  221 + "day": 2481,
  222 + "week": 1479,
  223 + "month": 2346
  224 + },
  225 + {
  226 + "name": "推广名称9",
  227 + "fav": 0,
  228 + "show": 567,
  229 + "weak": 5859,
  230 + "signin": 128,
  231 + "click": 6593,
  232 + "active": 1971,
  233 + "day7": 7596,
  234 + "day30": 3546,
  235 + "tomorrow": 6641,
  236 + "day": 1611,
  237 + "week": 5534,
  238 + "month": 3190
  239 + },
  240 + {
  241 + "name": "推广名称10",
  242 + "fav": 0,
  243 + "show": 3651,
  244 + "weak": 1819,
  245 + "signin": 4595,
  246 + "click": 7499,
  247 + "active": 7405,
  248 + "day7": 8710,
  249 + "day30": 5518,
  250 + "tomorrow": 428,
  251 + "day": 9768,
  252 + "week": 2864,
  253 + "month": 5811
131 } 254 }
132 - };  
133 -  
134 - let data = [table2ColumnList.name];  
135 -  
136 - this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));  
137 -  
138 - return data;  
139 - },  
140 - changeTableColumns () {  
141 - this.tableColumns2 = this.getTable2Columns();  
142 - },  
143 - toggleFav (index) {  
144 - this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;  
145 - },  
146 - down () {  
147 - this.$refs.table.exportCsv({  
148 - filename: '2132',  
149 - original: false  
150 - }); 255 + ]
151 } 256 }
152 }, 257 },
153 - ready () {  
154 - this.changeTableColumns(); 258 + methods: {
  259 + exportData (type) {
  260 + if (type === 1) {
  261 + this.$refs.table.exportCsv({
  262 + filename: '原始数据'
  263 + });
  264 + } else if (type === 2) {
  265 + this.$refs.table.exportCsv({
  266 + filename: '排序和过滤后的数据',
  267 + original: false
  268 + });
  269 + } else if (type === 3) {
  270 + this.$refs.table.exportCsv({
  271 + filename: '自定义数据',
  272 + columns: this.columns8.filter((col, index) => index < 4),
  273 + data: this.data7.filter((data, index) => index < 4)
  274 + });
  275 + }
  276 + }
155 } 277 }
156 } 278 }
157 </script> 279 </script>