Commit 0f4ccf4486c81077d054b24c65dbe272f8807e4c
1 parent
1c821c09
release 0.9.9
release 0.9.9
Showing
5 changed files
with
72 additions
and
211 deletions
Show diff stats
package.json
src/components/table/table.vue
... | ... | @@ -147,7 +147,9 @@ |
147 | 147 | return [ |
148 | 148 | `${prefixCls}-wrapper`, |
149 | 149 | { |
150 | - [`${prefixCls}-hide`]: !this.ready | |
150 | + [`${prefixCls}-hide`]: !this.ready, | |
151 | + [`${prefixCls}-with-header`]: this.showSlotHeader, | |
152 | + [`${prefixCls}-with-footer`]: this.showSlotFooter | |
151 | 153 | } |
152 | 154 | ] |
153 | 155 | }, |
... | ... | @@ -158,8 +160,6 @@ |
158 | 160 | [`${prefixCls}-${this.size}`]: !!this.size, |
159 | 161 | [`${prefixCls}-border`]: this.border, |
160 | 162 | [`${prefixCls}-stripe`]: this.stripe, |
161 | - [`${prefixCls}-with-header`]: this.showSlotHeader, | |
162 | - [`${prefixCls}-with-footer`]: this.showSlotFooter, | |
163 | 163 | [`${prefixCls}-with-fixed-top`]: !!this.height |
164 | 164 | } |
165 | 165 | ] | ... | ... |
src/styles/components/table.less
... | ... | @@ -46,16 +46,16 @@ |
46 | 46 | } |
47 | 47 | |
48 | 48 | &-with-header{ |
49 | - border-radius: @border-radius-base @border-radius-base 0 0; | |
49 | + //border-radius: @border-radius-base @border-radius-base 0 0; | |
50 | 50 | } |
51 | 51 | |
52 | 52 | &-with-footer{ |
53 | - border: 1px solid @border-color-base; | |
54 | - border-radius: 0 0 @border-radius-base @border-radius-base; | |
53 | + //border: 1px solid @border-color-base; | |
54 | + //border-radius: 0 0 @border-radius-base @border-radius-base; | |
55 | 55 | } |
56 | 56 | |
57 | 57 | &-with-header&-with-footer{ |
58 | - border-radius: @border-radius-base; | |
58 | + //border-radius: @border-radius-base; | |
59 | 59 | } |
60 | 60 | |
61 | 61 | &-title, &-footer{ | ... | ... |
test/routers/select.vue
1 | 1 | <template> |
2 | - <i-select :model.sync="model1" style="width:200px" clearable> | |
3 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
4 | - </i-select> | |
5 | - {{ model1 | json }} | |
6 | - <i-button @click="change">修改数据</i-button> | |
7 | - <i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange"> | |
8 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
9 | - </i-select> | |
10 | - {{ model10 | json }} | |
11 | - <i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange"> | |
12 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
13 | - </i-select> | |
14 | - {{ model11 | json }} | |
15 | - <i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange"> | |
16 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
17 | - </i-select> | |
18 | - {{ model12 | json }} | |
19 | - <br><br> | |
20 | - <i-select :model.sync="model2" size="small" style="width:100px"> | |
21 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
22 | - </i-select> | |
23 | - <i-select :model.sync="model3" style="width:100px"> | |
24 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
25 | - </i-select> | |
26 | - <i-select :model.sync="model4" size="large" style="width:100px"> | |
27 | - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
28 | - </i-select> | |
29 | - <i-select :model.sync="model7" style="width:200px"> | |
30 | - <Option-group label="热门城市"> | |
31 | - <i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option> | |
32 | - </Option-group> | |
33 | - <Option-group label="其它城市"> | |
34 | - <i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option> | |
35 | - </Option-group> | |
36 | - </i-select> | |
2 | + <Row style="margin: 100px"> | |
3 | + <i-col span="12" style="padding-right:10px"> | |
4 | + <i-select :model.sync="model11" filterable> | |
5 | + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
6 | + </i-select> | |
7 | + </i-col> | |
8 | + <i-col span="12"> | |
9 | + <i-select :model.sync="model12" filterable multiple> | |
10 | + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option> | |
11 | + </i-select> | |
12 | + </i-col> | |
13 | + </Row> | |
37 | 14 | </template> |
38 | 15 | <script> |
39 | - import { iSelect, iOption, iButton, OptionGroup } from 'iview'; | |
40 | 16 | export default { |
41 | - components: { iSelect, iOption, iButton, OptionGroup }, | |
42 | 17 | data () { |
43 | 18 | return { |
44 | 19 | cityList: [ |
... | ... | @@ -54,35 +29,21 @@ |
54 | 29 | value: 'shenzhen', |
55 | 30 | label: '深圳市' |
56 | 31 | }, |
57 | -// { | |
58 | -// value: 'hangzhou', | |
59 | -// label: '杭州市' | |
60 | -// }, | |
61 | -// { | |
62 | -// value: 'nanjing', | |
63 | -// label: '南京市' | |
64 | -// }, | |
65 | -// { | |
66 | -// value: 'chongqing', | |
67 | -// label: '重庆市' | |
68 | -// } | |
32 | + { | |
33 | + value: 'hangzhou', | |
34 | + label: '杭州市' | |
35 | + }, | |
36 | + { | |
37 | + value: 'nanjing', | |
38 | + label: '南京市' | |
39 | + }, | |
40 | + { | |
41 | + value: 'chongqing', | |
42 | + label: '重庆市' | |
43 | + } | |
69 | 44 | ], |
70 | - model1: '', | |
71 | - model10: [], | |
72 | 45 | model11: '', |
73 | - model12: [], | |
74 | - model2: '', | |
75 | - model3: '', | |
76 | - model4: '', | |
77 | - model7: '' | |
78 | - } | |
79 | - }, | |
80 | - methods: { | |
81 | - change () { | |
82 | - this.cityList.splice(2, 1); | |
83 | - }, | |
84 | - datachange (data) { | |
85 | - console.log(data); | |
46 | + model12: [] | |
86 | 47 | } |
87 | 48 | } |
88 | 49 | } | ... | ... |
test/routers/table.vue
1 | 1 | <template> |
2 | - <checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns"> | |
3 | - <checkbox value="show">展示</checkbox> | |
4 | - <checkbox value="weak">唤醒</checkbox> | |
5 | - <checkbox value="signin">登录</checkbox> | |
6 | - <checkbox value="click">点击</checkbox> | |
7 | - <checkbox value="active">激活</checkbox> | |
8 | - <checkbox value="day7">7日留存</checkbox> | |
9 | - <checkbox value="day30">30日留存</checkbox> | |
10 | - <checkbox value="tomorrow">次日留存</checkbox> | |
11 | - <checkbox value="day">日活跃</checkbox> | |
12 | - <checkbox value="week">周活跃</checkbox> | |
13 | - <checkbox value="month">月活跃</checkbox> | |
14 | - </checkbox-group> | |
15 | - <i-table :content="self" :data="tableData2" :columns="tableColumns2" border></i-table> | |
2 | + <i-table border :columns="columns1" :data="data1"> | |
3 | + <div slot="header">表格标题</div> | |
4 | + <div slot="footer">表格页脚</div> | |
5 | + </i-table> | |
16 | 6 | </template> |
17 | 7 | <script> |
18 | 8 | export default { |
19 | 9 | data () { |
20 | 10 | return { |
21 | - self: this, | |
22 | - tableData2: this.mockTableData2(), | |
23 | - tableColumns2: [], | |
24 | - tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month'] | |
25 | - } | |
26 | - }, | |
27 | - methods: { | |
28 | - mockTableData2 () { | |
29 | - let data = []; | |
30 | - function getNum() { | |
31 | - return Math.floor(Math.random () * 10000 + 1); | |
32 | - } | |
33 | - for (let i = 0; i < 10; i++) { | |
34 | - data.push({ | |
35 | - name: '推广名称' + (i+1), | |
36 | - fav: 0, | |
37 | - show: getNum(), | |
38 | - weak: getNum(), | |
39 | - signin: getNum(), | |
40 | - click: getNum(), | |
41 | - active: getNum(), | |
42 | - day7: getNum(), | |
43 | - day30: getNum(), | |
44 | - tomorrow: getNum(), | |
45 | - day: getNum(), | |
46 | - week: getNum(), | |
47 | - month: getNum() | |
48 | - }) | |
49 | - } | |
50 | - return data; | |
51 | - }, | |
52 | - getTable2Columns () { | |
53 | - const table2ColumnList = { | |
54 | - name: { | |
55 | - title: '名称', | |
56 | - key: 'name', | |
57 | - fixed: 'left', | |
58 | - width: 200, | |
59 | - render (row, column, index) { | |
60 | - return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon> | |
61 | - <Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon> | |
62 | - <span>${row.name}</span>`; | |
63 | - } | |
64 | - }, | |
65 | - show: { | |
66 | - title: '展示', | |
67 | - key: 'show', | |
68 | - width: 150, | |
69 | - sortable: true | |
70 | - }, | |
71 | - weak: { | |
72 | - title: '唤醒', | |
73 | - key: 'weak', | |
74 | - width: 150, | |
75 | - sortable: true | |
76 | - }, | |
77 | - signin: { | |
78 | - title: '登录', | |
79 | - key: 'signin', | |
80 | - width: 150, | |
81 | - sortable: true | |
82 | - }, | |
83 | - click: { | |
84 | - title: '点击', | |
85 | - key: 'click', | |
86 | - width: 150, | |
87 | - sortable: true | |
88 | - }, | |
89 | - active: { | |
90 | - title: '激活', | |
91 | - key: 'active', | |
92 | - width: 150, | |
93 | - sortable: true | |
94 | - }, | |
95 | - day7: { | |
96 | - title: '7日留存', | |
97 | - key: 'day7', | |
98 | - width: 150, | |
99 | - sortable: true | |
100 | - }, | |
101 | - day30: { | |
102 | - title: '30日留存', | |
103 | - key: 'day30', | |
104 | - width: 150, | |
105 | - sortable: true | |
106 | - }, | |
107 | - tomorrow: { | |
108 | - title: '次日留存', | |
109 | - key: 'tomorrow', | |
110 | - width: 150, | |
111 | - sortable: true | |
112 | - }, | |
113 | - day: { | |
114 | - title: '日活跃', | |
115 | - key: 'day', | |
116 | - width: 150, | |
117 | - sortable: true | |
118 | - }, | |
119 | - week: { | |
120 | - title: '周活跃', | |
121 | - key: 'week', | |
122 | - width: 150, | |
123 | - sortable: true | |
124 | - }, | |
125 | - month: { | |
126 | - title: '月活跃', | |
127 | - key: 'month', | |
128 | - width: 150, | |
129 | - sortable: true | |
11 | + columns1: [ | |
12 | + { | |
13 | + title: '姓名', | |
14 | + key: 'name' | |
15 | + }, | |
16 | + { | |
17 | + title: '年龄', | |
18 | + key: 'age' | |
19 | + }, | |
20 | + { | |
21 | + title: '地址', | |
22 | + key: 'address' | |
23 | + } | |
24 | + ], | |
25 | + data1: [ | |
26 | + { | |
27 | + name: '王小明', | |
28 | + age: 18, | |
29 | + address: '北京市朝阳区芍药居' | |
30 | + }, | |
31 | + { | |
32 | + name: '张小刚', | |
33 | + age: 25, | |
34 | + address: '北京市海淀区西二旗' | |
35 | + }, | |
36 | + { | |
37 | + name: '李小红', | |
38 | + age: 30, | |
39 | + address: '上海市浦东新区世纪大道' | |
40 | + }, | |
41 | + { | |
42 | + name: '周小伟', | |
43 | + age: 26, | |
44 | + address: '深圳市南山区深南大道' | |
130 | 45 | } |
131 | - }; | |
132 | - | |
133 | - let data = [table2ColumnList.name]; | |
134 | - | |
135 | - this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col])); | |
136 | - | |
137 | - return data; | |
138 | - }, | |
139 | - changeTableColumns () { | |
140 | - this.tableColumns2 = this.getTable2Columns(); | |
141 | - }, | |
142 | - toggleFav (index) { | |
143 | - this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0; | |
46 | + ] | |
144 | 47 | } |
145 | - }, | |
146 | - ready () { | |
147 | - this.changeTableColumns(); | |
148 | 48 | } |
149 | 49 | } |
150 | 50 | </script> | ... | ... |