other / mew-iview

Commit 2810d8c78d38e87b5d2bddca062bd5a92a7bf7e7

Authored by 梁灏
1 parent c211f717

fixed #183 

fixed #183
Showing 3 changed files with 133 additions and 107 deletions   Show diff stats
Inline Side-by-side
src/components/cascader/cascader.vue
  Show/Hide comments   View file @2810d8c
... ... @@ -87,7 +87,8 @@
87 87 prefixCls: prefixCls,
88 88 visible: false,
89 89 selected: [],
90   - tmpSelected: []
  90 + tmpSelected: [],
  91 + updatingValue: false // to fix set value in changeOnSelect type
91 92 };
92 93 },
93 94 computed: {
... ... @@ -162,6 +163,7 @@
162 163 });
163 164  
164 165 if (!fromInit) {
  166 + this.updatingValue = true;
165 167 this.value = newVal;
166 168 this.emitValue(this.value, oldVal);
167 169 }
... ... @@ -186,7 +188,11 @@
186 188 }
187 189 },
188 190 value () {
189   - this.updateSelected();
  191 + if (this.updatingValue) {
  192 + this.updatingValue = false;
  193 + return;
  194 + }
  195 + this.updateSelected(true);
190 196 }
191 197 }
192 198 };
... ...
test/routers/cascader.vue
  Show/Hide comments   View file @2810d8c
1 1 <template>
2   - <div v-for="item in list">
3   - <Cascader :data="data" change-on-select :render-format="format"></Cascader>
4   - </div>
5   - <i-button @click="add">add</i-button>
6   - <i-button @click="remove">remove</i-button>
  2 + <Cascader :data="data" :value.sync="value" change-on-select></Cascader>
7 3 </template>
8 4 <script>
9 5 export default {
10 6 data () {
11 7 return {
12   - list: [
13   - {
14   - a: 1
15   - }
16   - ],
17   - data: [{
18   - value: 'beijing',
19   - label: '北京',
20   - children: [
21   - {
22   - value: 'gugong',
23   - label: '故宫'
24   - },
25   - {
26   - value: 'tiantan',
27   - label: '天坛'
28   - },
29   - {
30   - value: 'wangfujing',
31   - label: '王府井'
32   - }
33   - ]
34   - }, {
35   - value: 'jiangsu',
36   - label: '江苏',
37   - children: [
38   - {
39   - value: 'nanjing',
40   - label: '南京',
41   - children: [
42   - {
43   - value: 'fuzimiao',
44   - label: '夫子庙'
45   - }
46   - ]
47   - },
48   - {
49   - value: 'suzhou',
50   - label: '苏州',
51   - children: [
52   - {
53   - value: 'zhuozhengyuan',
54   - label: '拙政园'
55   - },
56   - {
57   - value: 'shizilin',
58   - label: '狮子林'
59   - }
60   - ]
61   - }
62   - ]
63   - }]
  8 + value: [],
  9 + data: []
64 10 }
65 11 },
66 12 methods: {
67   - add () {
68   - this.list.push({
69   - a: 2
70   - })
71   - },
72   - remove () {
73   - this.list.splice(0, 1);
74   - },
75   - format (labels) {
76   - return labels.join(' - ');
  13 + updateData () {
  14 + setTimeout(() => {
  15 + this.data = [{
  16 + value: 'beijing',
  17 + label: '北京',
  18 + children: [
  19 + {
  20 + value: 'gugong',
  21 + label: '故宫'
  22 + },
  23 + {
  24 + value: 'tiantan',
  25 + label: '天坛'
  26 + },
  27 + {
  28 + value: 'wangfujing',
  29 + label: '王府井'
  30 + }
  31 + ]
  32 + }, {
  33 + value: 'jiangsu',
  34 + label: '江苏',
  35 + children: [
  36 + {
  37 + value: 'nanjing',
  38 + label: '南京',
  39 + children: [
  40 + {
  41 + value: 'fuzimiao',
  42 + label: '夫子庙'
  43 + }
  44 + ]
  45 + },
  46 + {
  47 + value: 'suzhou',
  48 + label: '苏州',
  49 + children: [
  50 + {
  51 + value: 'zhuozhengyuan',
  52 + label: '拙政园'
  53 + },
  54 + {
  55 + value: 'shizilin',
  56 + label: '狮子林'
  57 + }
  58 + ]
  59 + }
  60 + ]
  61 + }];
  62 + setTimeout(() => {
  63 + this.value = ['beijing', 'tiantan'];
  64 + }, 1000);
  65 + }, 1000);
77 66 }
  67 + },
  68 + ready () {
  69 + this.updateData();
78 70 }
79 71 }
80 72 </script>
... ...
test/routers/table.vue
  Show/Hide comments   View file @2810d8c
1 1 <style>
2   - /*.ivu-table .demo-table-info-row td{*/
3   - /*background-color: #2db7f5;*/
4   - /*color: #fff;*/
5   - /*}*/
6   - /*.ivu-table .demo-table-error-row td{*/
7   - /*background-color: #ff6600;*/
8   - /*color: #fff;*/
9   - /*}*/
10   - .ivu-table .table-age-col{
11   - background: #ff6600;
  2 + .ivu-table .demo-table-info-row td{
  3 + background-color: #2db7f5;
  4 + color: #fff;
12 5 }
13   - .ivu-table .table-name-col{
14   - background: #2db7f5;
  6 + .ivu-table .demo-table-error-row td{
  7 + background-color: #ff6600;
  8 + color: #fff;
15 9 }
16   - .ivu-table .table-address-col{
17   - background: #187;
  10 + .ivu-table .demo-table-info-column{
  11 + background-color: #2db7f5;
  12 + color: #fff;
  13 + border-bottom: 1px solid #2db7f5;
18 14 }
19   - .ivu-table .class-cell-age{
20   - background: #187;
  15 + .ivu-table .demo-table-info-cell-name {
  16 + background-color: #2db7f5;
21 17 color: #fff;
22 18 }
23   - .ivu-table .class-cell-address{
24   - background: #f60;
  19 + .ivu-table .demo-table-info-cell-age {
  20 + background-color: #ff6600;
25 21 color: #fff;
26 22 }
27   - .ivu-table .class-cell-name{
28   - background: #2db7f5;
  23 + .ivu-table .demo-table-info-cell-address {
  24 + background-color: #187;
29 25 color: #fff;
30 26 }
31 27 </style>
32 28 <template>
  29 + <p>自定义行样式：</p>
33 30 <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
  31 + <p>自定义列样式：</p>
  32 + <i-table :columns="columns9" :data="data1"></i-table>
  33 + <p>自定义任意单元格样式：</p>
  34 + <i-table :columns="columns1" :data="data8"></i-table>
34 35 </template>
35 36 <script>
36 37 export default {
... ... @@ -38,37 +39,38 @@
38 39 return {
39 40 columns1: [
40 41 {
41   - type: 'selection',
42   - width: 60,
43   - align: 'center'
  42 + title: '姓名',
  43 + key: 'name'
44 44 },
45 45 {
  46 + title: '年龄',
  47 + key: 'age'
  48 + },
  49 + {
  50 + title: '地址',
  51 + key: 'address'
  52 + }
  53 + ],
  54 + columns9: [
  55 + {
46 56 title: '姓名',
47   - key: 'name',
48   -// fixed: 'right',
49   -// className: 'table-name-col'
  57 + key: 'name'
50 58 },
51 59 {
52 60 title: '年龄',
53 61 key: 'age',
54   -// fixed: 'right',
55   -// className: 'table-age-col'
  62 + className: 'demo-table-info-column'
56 63 },
57 64 {
58 65 title: '地址',
59   - key: 'address',
60   -// className: 'table-address-col'
  66 + key: 'address'
61 67 }
62 68 ],
63 69 data1: [
64 70 {
65 71 name: '王小明',
66 72 age: 18,
67   - address: '北京市朝阳区芍药居',
68   - cellClassName: {
69   - age: 'class-cell-age',
70   - address: 'class-cell-address'
71   - }
  73 + address: '北京市朝阳区芍药居'
72 74 },
73 75 {
74 76 name: '张小刚',
... ... @@ -78,15 +80,41 @@
78 80 {
79 81 name: '李小红',
80 82 age: 30,
81   - address: '上海市浦东新区世纪大道',
  83 + address: '上海市浦东新区世纪大道'
  84 + },
  85 + {
  86 + name: '周小伟',
  87 + age: 26,
  88 + address: '深圳市南山区深南大道'
  89 + }
  90 + ],
  91 + data8: [
  92 + {
  93 + name: '王小明',
  94 + age: 18,
  95 + address: '北京市朝阳区芍药居'
  96 + },
  97 + {
  98 + name: '张小刚',
  99 + age: 25,
  100 + address: '北京市海淀区西二旗',
82 101 cellClassName: {
83   - name: 'class-cell-name'
  102 + age: 'demo-table-info-cell-age',
  103 + address: 'demo-table-info-cell-address'
84 104 }
85 105 },
86 106 {
  107 + name: '李小红',
  108 + age: 30,
  109 + address: '上海市浦东新区世纪大道'
  110 + },
  111 + {
87 112 name: '周小伟',
88 113 age: 26,
89   - address: '深圳市南山区深南大道'
  114 + address: '深圳市南山区深南大道',
  115 + cellClassName: {
  116 + name: 'demo-table-info-cell-name'
  117 + }
90 118 }
91 119 ]
92 120 }
... ...