element ui el-autocomplete 组件 value-key 属性

最新推荐文章于 2024-07-19 14:26:17 发布

前端小老弟儿

最新推荐文章于 2024-07-19 14:26:17 发布

阅读量6.4k

点赞数 4

分类专栏： vuejs 文章标签： vue.js vue

本文链接：https://blog.csdn.net/weixin_42994352/article/details/117471644

版权

在使用 Vue.js 和 Element UI 的 el-autocomplete 组件时，遇到下拉数据无法渲染的问题。原因是组件默认只支持 'value' 键作为数据标识。为避免遍历修改数据，通过设置 'value-key' 属性，可以自定义数据绑定的键，从而解决渲染问题。

摘要由CSDN通过智能技术生成

el-autocomplete 组件是可以支持模糊搜索，但是在使用的时候，组件的下拉数据不能渲染，就像这样，下拉框是空的
在这里插入图片描述
我在接口请求回来的数据是这样的：

从element ui中给的例子中可以看出，这个组件在传值的时候默认是只支持value的

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>
<script>
  export default {
   
    data() {
   
      return {
   
        restaurants: [],
        state: '',
        timeout:  null
      };
    },
    methods: {
   
      loadAll() {
   
        return [
          {
    "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          {
    "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          {
    "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          {
    "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          {
    "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
          {
    "value": "贡茶", "address": "上海市长宁区金钟路633号" },
          {
    "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
          {
    "value": "茶芝兰（奶茶，手抓饼）&#