可以在 element-ui el-autocomplete 回调中传递数组吗？答案

【问题标题】：Can an Array be passed in an element-ui el-autocomplete callback?可以在 element-ui el-autocomplete 回调中传递数组吗？
【发布时间】：2019-03-06 12:19:30
【问题描述】：

我尝试将el-autocomplete 标记与最简单的版本一起使用：回调函数（JSFiddle version）返回的Array。

Vue.component('button-counter', {
  data: function() {
    return {
      selectdusers: [],
      user: ''
    }
  },
  template: '<el-container>        <el-container style="margin-left: 15px; width: 150px">            <el-autocomplete                class="inline-input"                v-model="user"                :fetch-suggestions="filterUsers"                placeholder="add user"                @select="handleSelect"            ></el-autocomplete>            <el-button type="info" icon="el-icon-plus" click="addUser(user)">Add</el-button>        </el-container>    </el-container>',
  methods: {
    addUser(user) {
      this.selectedUsers.push(user)
      this.user = ''
    },
    filterUsers(user, cb) {
      console.log(user)
      cb(['qqq', 'zzz'])
      //return this.allusers.filter(x => _.includes(x.f+x.t, user))
    },
    handleSelect() {}
  },
})

new Vue({
  el: '#components-demo'
})

@import url("//unpkg.com/element-ui@2.4.8/lib/theme-chalk/index.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.7/index.js"></script>
<div id="components-demo">
  <button-counter></button-counter>
</div>

建议框在视觉上是空的，尽管 DevTools 在 <ElAutocompleteSuggestions> → data → suggestions 中显示了预期的元素

【问题讨论】：

标签： javascript vue.js vue-component element-ui

【解决方案1】：

对于使用 Array 而不是 Object，您可以在自动完成块中使用 slot

<el-autocomplete ...>
  <template slot-scope="{ item }">
    <div class="item">{{ item }}</div>
  </template>
</el-autocomplete>

【讨论】：

这是更好的答案，因为它允许您毫无问题地传递一个直的平面数组

【解决方案2】：

需要通过回调传递的是Object，它必须有一个名为value 的属性。此属性包含作为建议显示的内容。

对于上面的例子：

filterUsers(user, cb) {
      console.log(user)
      cb([{'value': 'qqq', 'whatever': 'djhjfh'}, {'value': 'zzz', 'whatever': 'uiuiiu'}])
    },

【讨论】：