chenhaodong / mew-iview

Commit e1b86bcf73a4664c315ff70a50934a57c095b10c

Authored by 梁灏
1 parent 8c4cc383

fixed #1865

Showing 3 changed files with 102 additions and 17 deletions   Show diff stats
Inline Side-by-side
examples/routers/select.vue
  Show/Hide comments   View file @e1b86bc
... ... @@ -53,33 +53,113 @@
53 53 <!--}-->
54 54 <!--</script>-->
55 55  
  56 +<!--<template>-->
  57 + <!--<div>-->
  58 + <!--<Select v-model="value">-->
  59 + <!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
  60 + <!--</Select>-->
  61 + <!--<Button @click="setList">set list</Button>-->
  62 + <!--</div>-->
  63 +<!--</template>-->
  64 +<!--<script>-->
  65 + <!--export default {-->
  66 + <!--data () {-->
  67 + <!--return {-->
  68 + <!--value: '',-->
  69 + <!--list: []-->
  70 + <!--}-->
  71 + <!--},-->
  72 + <!--methods: {-->
  73 + <!--setList () {-->
  74 + <!--let list = [];-->
  75 + <!--for (let i = 0; i < 400; i++) {-->
  76 + <!--list.push({-->
  77 + <!--value: 'value' + i,-->
  78 + <!--label: 'label' + i-->
  79 + <!--});-->
  80 + <!--}-->
  81 + <!--this.list = list;-->
  82 + <!--}-->
  83 + <!--}-->
  84 + <!--}-->
  85 +<!--</script>-->
  86 +
56 87 <template>
57   - <div>
58   - <Select v-model="value">
59   - <Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>
60   - </Select>
61   - <Button @click="setList">set list</Button>
  88 + <div style="width: 400px;margin: 50px;">
  89 + <div>data: {{ model13 }}</div>
  90 + <Row>
  91 + <Col span="12" style="padding-right:10px">
  92 + <Select
  93 + v-model="model13"
  94 + filterable
  95 + remote
  96 + :remote-method="remoteMethod1"
  97 + :loading="loading1">
  98 + <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
  99 + </Select>
  100 + </Col>
  101 + <Col span="12">
  102 + <Select
  103 + v-model="model14"
  104 + multiple
  105 + filterable
  106 + remote
  107 + :remote-method="remoteMethod2"
  108 + :loading="loading2">
  109 + <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
  110 + </Select>
  111 + </Col>
  112 + </Row>
62 113 </div>
63 114 </template>
64 115 <script>
65 116 export default {
66 117 data () {
67 118 return {
68   - value: '',
69   - list: []
  119 + model13: '',
  120 + loading1: false,
  121 + options1: [],
  122 + model14: [],
  123 + loading2: false,
  124 + options2: [],
  125 + list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
70 126 }
71 127 },
72 128 methods: {
73   - setList () {
74   - let list = [];
75   - for (let i = 0; i < 400; i++) {
76   - list.push({
77   - value: 'value' + i,
78   - label: 'label' + i
79   - });
  129 + remoteMethod1 (query) {
  130 + if (query !== '') {
  131 + this.loading1 = true;
  132 + setTimeout(() => {
  133 + this.loading1 = false;
  134 + const list = this.list.map(item => {
  135 + return {
  136 + value: item,
  137 + label: item
  138 + };
  139 + });
  140 + this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
  141 + }, 200);
  142 + } else {
  143 + this.options1 = [];
  144 + }
  145 + },
  146 + remoteMethod2 (query) {
  147 + if (query !== '') {
  148 + this.loading2 = true;
  149 + setTimeout(() => {
  150 + this.loading2 = false;
  151 + const list = this.list.map(item => {
  152 + return {
  153 + value: item,
  154 + label: item
  155 + };
  156 + });
  157 + this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
  158 + }, 200);
  159 + } else {
  160 + this.options2 = [];
80 161 }
81   - this.list = list;
82 162 }
83 163 }
84 164 }
85   -</script>
86 165 \ No newline at end of file
  166 +</script>
... ...
src/components/select/option.vue
  Show/Hide comments   View file @e1b86bc
... ... @@ -63,10 +63,14 @@
63 63 queryChange (val) {
64 64 const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
65 65 this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
  66 + },
  67 + // 在使用函数防抖后，设置 key 后，不更新组件了，导致SearchLabel 不更新 #1865
  68 + updateSearchLabel () {
  69 + this.searchLabel = this.$el.innerHTML;
66 70 }
67 71 },
68 72 mounted () {
69   - this.searchLabel = this.$el.innerHTML;
  73 + this.updateSearchLabel();
70 74 this.dispatch('iSelect', 'append');
71 75 this.$on('on-select-close', () => {
72 76 this.isFocus = false;
... ...
src/components/select/select.vue
  Show/Hide comments   View file @e1b86bc
... ... @@ -627,6 +627,7 @@
627 627 this.$nextTick(() => this.broadcastQuery(''));
628 628 } else {
629 629 this.findChild((child) => {
  630 + child.updateSearchLabel(); // #1865
630 631 child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
631 632 });
632 633 }
... ...