Commit 952ddb518e702ec051eff89c024acb045fe7d97e
1 parent
29264399
update Cascader
Showing
2 changed files
with
23 additions
and
2 deletions
Show diff stats
src/components/cascader/cascader.vue
| @@ -29,7 +29,7 @@ | @@ -29,7 +29,7 @@ | ||
| 29 | :disabled="disabled" | 29 | :disabled="disabled" |
| 30 | :change-on-select="changeOnSelect" | 30 | :change-on-select="changeOnSelect" |
| 31 | :trigger="trigger"></Caspanel> | 31 | :trigger="trigger"></Caspanel> |
| 32 | - <div :class="[prefixCls + '-dropdown']" v-show="filterable && query !== ''"> | 32 | + <div :class="[prefixCls + '-dropdown']" v-show="filterable && query !== '' && querySelections.length"> |
| 33 | <ul :class="[selectPrefixCls + '-dropdown-list']"> | 33 | <ul :class="[selectPrefixCls + '-dropdown-list']"> |
| 34 | <li | 34 | <li |
| 35 | :class="[selectPrefixCls + '-item', { | 35 | :class="[selectPrefixCls + '-item', { |
| @@ -39,6 +39,7 @@ | @@ -39,6 +39,7 @@ | ||
| 39 | @click="handleSelectItem(index)" v-html="item.display"></li> | 39 | @click="handleSelectItem(index)" v-html="item.display"></li> |
| 40 | </ul> | 40 | </ul> |
| 41 | </div> | 41 | </div> |
| 42 | + <ul v-show="filterable && query !== '' && !querySelections.length" :class="[prefixCls + '-not-found-tip']"><li>{{ localeNotFoundText }}</li></ul> | ||
| 42 | </div> | 43 | </div> |
| 43 | </Drop> | 44 | </Drop> |
| 44 | </transition> | 45 | </transition> |
| @@ -113,6 +114,9 @@ | @@ -113,6 +114,9 @@ | ||
| 113 | filterable: { | 114 | filterable: { |
| 114 | type: Boolean, | 115 | type: Boolean, |
| 115 | default: false | 116 | default: false |
| 117 | + }, | ||
| 118 | + notFoundText: { | ||
| 119 | + type: String | ||
| 116 | } | 120 | } |
| 117 | }, | 121 | }, |
| 118 | data () { | 122 | data () { |
| @@ -135,7 +139,8 @@ | @@ -135,7 +139,8 @@ | ||
| 135 | [`${prefixCls}-show-clear`]: this.showCloseIcon, | 139 | [`${prefixCls}-show-clear`]: this.showCloseIcon, |
| 136 | [`${prefixCls}-size-${this.size}`]: !!this.size, | 140 | [`${prefixCls}-size-${this.size}`]: !!this.size, |
| 137 | [`${prefixCls}-visible`]: this.visible, | 141 | [`${prefixCls}-visible`]: this.visible, |
| 138 | - [`${prefixCls}-disabled`]: this.disabled | 142 | + [`${prefixCls}-disabled`]: this.disabled, |
| 143 | + [`${prefixCls}-not-found`]: this.filterable && this.query !== '' && !this.querySelections.length | ||
| 139 | } | 144 | } |
| 140 | ]; | 145 | ]; |
| 141 | }, | 146 | }, |
| @@ -163,6 +168,13 @@ | @@ -163,6 +168,13 @@ | ||
| 163 | inputPlaceholder () { | 168 | inputPlaceholder () { |
| 164 | return this.filterable && this.currentValue.length ? null : this.localePlaceholder; | 169 | return this.filterable && this.currentValue.length ? null : this.localePlaceholder; |
| 165 | }, | 170 | }, |
| 171 | + localeNotFoundText () { | ||
| 172 | + if (this.notFoundText === undefined) { | ||
| 173 | + return this.t('i.select.noMatch'); | ||
| 174 | + } else { | ||
| 175 | + return this.notFoundText; | ||
| 176 | + } | ||
| 177 | + }, | ||
| 166 | querySelections () { | 178 | querySelections () { |
| 167 | let selections = []; | 179 | let selections = []; |
| 168 | function getSelections (arr, label, value) { | 180 | function getSelections (arr, label, value) { |
src/styles/components/cascader.less
| @@ -79,6 +79,15 @@ | @@ -79,6 +79,15 @@ | ||
| 79 | padding: 5px 0; | 79 | padding: 5px 0; |
| 80 | } | 80 | } |
| 81 | 81 | ||
| 82 | + &-not-found-tip{ | ||
| 83 | + padding: 5px 0; | ||
| 84 | + text-align: center; | ||
| 85 | + color: @btn-disable-color; | ||
| 86 | + } | ||
| 87 | + &-not-found .@{select-dropdown-prefix-cls} { | ||
| 88 | + width: 100%; | ||
| 89 | + } | ||
| 90 | + | ||
| 82 | &-menu{ | 91 | &-menu{ |
| 83 | display: inline-block; | 92 | display: inline-block; |
| 84 | min-width: 100px; | 93 | min-width: 100px; |