VUE带输入建议的输入框数据必须含有value属性?这其实可以解决的

问题描述

最近做项目时遇到一个小需求,要做一个可以输入的下拉框。什么?我想打人了。下拉框就下拉框,输入框就输入框,什么是可以输入的下拉框(由于我年少无知、孤陋寡闻 、短见薄识、才疏学浅)?我当时就不干了,要不是旁边同事拦着我,我怕我就被领导揍了

这样的情况下我一边骂骂咧咧一边去查相关资料,找找有没有相关案例,诶,还真有(脸好疼),废话不多说,上图
VUE带输入建议的输入框数据必须含有value属性?这其实可以解决的_第1张图片

人家elementUI上就有,直接照搬过来不香嘛?香,真香!!!然后我就开始施展我的CV大法,三下五除二就整到我代码里去了,就在这时问题来了朋友们,这value是啥意思?我是从后台获取的列表数组,里面也没value属性啊,咋整?

VUE带输入建议的输入框数据必须含有value属性?这其实可以解决的_第2张图片

解决问题

然后我各种百度啊,试了N种方法,终于找到一种有效的方法,你别说,还真TM有效,废话不多说,上代码

          <el-col :span="12">
            <el-form-item label="单位" prop="dUnit">
              <el-autocomplete
                class="inline-input"
                v-model="form.dUnit"
                :fetch-suggestions="querySearch"
                placeholder="请输入所属单位"
                @select="handleSelect"
              >
                <template slot-scope="{ item }">
                  <div>{{ item.value=item.iInstitutionsName }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>

重点是这段兄弟们,将value替换成自己想提示的字段,例如我这里将想要展示的是iInstitutionsName 字段的内容,所以我就这样写咯!!!最后希望大家少走弯路,能够多分享一些自己解决过的问题,佛祖保佑,永无Bug,有Bug也是小Bug

                <template slot-scope="{ item }">
                  <div>{{ item.value=item.iInstitutionsName }}</div>
                </template>

你可能感兴趣的:(VUE,分享)