记录一个智障的elment的下拉选组件选中后输入框现实的lable值而不是value值的原因

最新推荐文章于 2024-03-06 09:24:44 发布

农夫三拳有点疼=-=

最新推荐文章于 2024-03-06 09:24:44 发布

阅读量408

点赞数 1

文章标签：开发语言

本文链接：https://blog.csdn.net/m0_64207574/article/details/131208016

版权

该段代码展示了如何在Vue.js中使用el-select组件动态渲染选项列表。v-model绑定值，@change事件处理选择变化，v-for循环遍历circleList生成选项，每个选项的label和value基于item对象的属性。当列表为空时，显示一个禁用的选项。点击查看更多可以触发获取更多选项的函数。

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

<el-select
        v-model="value"
        placeholder="请添加"
        @change="changeSelectCircle" 
      >
      
      <div v-if="circleList.length>0">
        <el-option
          v-for="item in circleList"
          :key="item.circleId"
          :label="item.name"
          :value="item.circleId"
        >
          <div class="circleItem">
            <div>
              <img :src="item.picture" alt="" /><span>{{ item.name }}</span>
            </div>
            <span class="hot">{{ item.hotValue }}</span>
          </div>
        </el-option>
        <div class="seeMove" @click="getcircleList">查看更多</div>
      </div>
      <div v-else>
        <el-option disabled value="暂无选项" style="text-align: center;"></el-option>
      </div>
        
  </el-select>

data:
circleList: [
        {
          circleId: 1,
          picture: '',
          name: '名称1',
          hotValue: '12312w',
        },
        {
          circleId: 2,
          picture: '',
          name: '名称2',
          hotValue: '12312w',
        },
        {
          circleId: 3,
          picture: '',
          name: '名称3',
          hotValue: '12312w',
        },
      ],
value:''

中间绑定的label属性是选中后显示到输入框的值

value是显示出下拉选的值，所以别弄混了，如果