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
package.json
  Show/Hide comments   View file @84a351d
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.10-rc-3",
  3 + "version": "0.9.10-rc-4",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/layout/col.vue
  Show/Hide comments   View file @84a351d
... ... @@ -15,7 +15,11 @@
15 15 offset: [Number, String],
16 16 push: [Number, String],
17 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 24 data () {
21 25 return {
... ... @@ -24,7 +28,7 @@
24 28 },
25 29 computed: {
26 30 classes () {
27   - return [
  31 + let classList = [
28 32 `${prefixCls}`,
29 33 {
30 34 [`${prefixCls}-span-${this.span}`]: this.span,
... ... @@ -34,7 +38,24 @@
34 38 [`${prefixCls}-pull-${this.pull}`]: this.pull,
35 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 60 styles () {
40 61 let style = {};
... ...
src/styles/common/layout.less
  Show/Hide comments   View file @84a351d
... ... @@ -52,3 +52,37 @@
52 52 }
53 53  
54 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 9 .clearfix;
10 10 }
11 11  
12   -.float-grid-columns() {
  12 +.float-grid-columns(@class) {
13 13 .col(@index) { // initial
14   - @item: ~".@{col-prefix-cls}-span-@{index}";
  14 + @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
15 15 .col((@index + 1), @item);
16 16 }
17 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 19 .col((@index + 1), ~"@{list}, @{item}");
20 20 }
21 21 .col(@index, @list) when (@index > @grid-columns) { // terminal
... ... @@ -27,28 +27,28 @@
27 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 32 display: block;
33 33 width: percentage((@index / @grid-columns));
34 34 }
35   - .@{col-prefix-cls}-push-@{index} {
  35 + .@{col-prefix-cls}@{class}-push-@{index} {
36 36 left: percentage((@index / @grid-columns));
37 37 }
38   - .@{col-prefix-cls}-pull-@{index} {
  38 + .@{col-prefix-cls}@{class}-pull-@{index} {
39 39 right: percentage((@index / @grid-columns));
40 40 }
41   - .@{col-prefix-cls}-offset-@{index} {
  41 + .@{col-prefix-cls}@{class}-offset-@{index} {
42 42 margin-left: percentage((@index / @grid-columns));
43 43 }
44   - .@{col-prefix-cls}-order-@{index} {
  44 + .@{col-prefix-cls}@{class}-order-@{index} {
45 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 52 display: none;
53 53 }
54 54 .@{col-prefix-cls}-push-@{index} {
... ... @@ -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 66 \ No newline at end of file
... ...
src/styles/themes/default/custom.less
  Show/Hide comments   View file @84a351d
... ... @@ -112,6 +112,27 @@
112 112 // Tag
113 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 136 // Z-index
116 137 @zindex-spin : 8;
117 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 12 </style>
14 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 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 25 </template>
72 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 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 30 </script>
... ...
test/routers/table.vue
  Show/Hide comments   View file @84a351d
1 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 7 </template>
18 8 <script>
19 9 export default {
20 10 data () {
21 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 279 </script>
... ...