Commit 2810d8c78d38e87b5d2bddca062bd5a92a7bf7e7
1 parent
c211f717
fixed #183
fixed #183
Showing
3 changed files
with
133 additions
and
107 deletions
Show diff stats
src/components/cascader/cascader.vue
| @@ -87,7 +87,8 @@ | @@ -87,7 +87,8 @@ | ||
| 87 | prefixCls: prefixCls, | 87 | prefixCls: prefixCls, |
| 88 | visible: false, | 88 | visible: false, |
| 89 | selected: [], | 89 | selected: [], |
| 90 | - tmpSelected: [] | 90 | + tmpSelected: [], |
| 91 | + updatingValue: false // to fix set value in changeOnSelect type | ||
| 91 | }; | 92 | }; |
| 92 | }, | 93 | }, |
| 93 | computed: { | 94 | computed: { |
| @@ -162,6 +163,7 @@ | @@ -162,6 +163,7 @@ | ||
| 162 | }); | 163 | }); |
| 163 | 164 | ||
| 164 | if (!fromInit) { | 165 | if (!fromInit) { |
| 166 | + this.updatingValue = true; | ||
| 165 | this.value = newVal; | 167 | this.value = newVal; |
| 166 | this.emitValue(this.value, oldVal); | 168 | this.emitValue(this.value, oldVal); |
| 167 | } | 169 | } |
| @@ -186,7 +188,11 @@ | @@ -186,7 +188,11 @@ | ||
| 186 | } | 188 | } |
| 187 | }, | 189 | }, |
| 188 | value () { | 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
| 1 | <template> | 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 | </template> | 3 | </template> |
| 8 | <script> | 4 | <script> |
| 9 | export default { | 5 | export default { |
| 10 | data () { | 6 | data () { |
| 11 | return { | 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 | methods: { | 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 | </script> | 72 | </script> |
test/routers/table.vue
| 1 | <style> | 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 | color: #fff; | 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 | color: #fff; | 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 | color: #fff; | 25 | color: #fff; |
| 30 | } | 26 | } |
| 31 | </style> | 27 | </style> |
| 32 | <template> | 28 | <template> |
| 29 | + <p>自定义行样式：</p> | ||
| 33 | <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table> | 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 | </template> | 35 | </template> |
| 35 | <script> | 36 | <script> |
| 36 | export default { | 37 | export default { |
| @@ -38,37 +39,38 @@ | @@ -38,37 +39,38 @@ | ||
| 38 | return { | 39 | return { |
| 39 | columns1: [ | 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 | title: '姓名', | 56 | title: '姓名', |
| 47 | - key: 'name', | ||
| 48 | -// fixed: 'right', | ||
| 49 | -// className: 'table-name-col' | 57 | + key: 'name' |
| 50 | }, | 58 | }, |
| 51 | { | 59 | { |
| 52 | title: '年龄', | 60 | title: '年龄', |
| 53 | key: 'age', | 61 | key: 'age', |
| 54 | -// fixed: 'right', | ||
| 55 | -// className: 'table-age-col' | 62 | + className: 'demo-table-info-column' |
| 56 | }, | 63 | }, |
| 57 | { | 64 | { |
| 58 | title: '地址', | 65 | title: '地址', |
| 59 | - key: 'address', | ||
| 60 | -// className: 'table-address-col' | 66 | + key: 'address' |
| 61 | } | 67 | } |
| 62 | ], | 68 | ], |
| 63 | data1: [ | 69 | data1: [ |
| 64 | { | 70 | { |
| 65 | name: '王小明', | 71 | name: '王小明', |
| 66 | age: 18, | 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 | name: '张小刚', | 76 | name: '张小刚', |
| @@ -78,15 +80,41 @@ | @@ -78,15 +80,41 @@ | ||
| 78 | { | 80 | { |
| 79 | name: '李小红', | 81 | name: '李小红', |
| 80 | age: 30, | 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 | cellClassName: { | 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 | name: '周小伟', | 112 | name: '周小伟', |
| 88 | age: 26, | 113 | age: 26, |
| 89 | - address: '深圳市南山区深南大道' | 114 | + address: '深圳市南山区深南大道', |
| 115 | + cellClassName: { | ||
| 116 | + name: 'demo-table-info-cell-name' | ||
| 117 | + } | ||
| 90 | } | 118 | } |
| 91 | ] | 119 | ] |
| 92 | } | 120 | } |