【elementUI】el-select相关问题

官方使用DEMO

html 复制代码
<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

1.修改下拉框的宽度

:popper-append-to-body="false"

html 复制代码
<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :popper-append-to-body="false"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

2.下拉框筛选不显示某条数据

v-if="item.value !== form.id"

javascript 复制代码
<el-option
	v-for="item in options"
	:key="item.value"
	:label="item.label"
	:value="item.value"
	v-if="item.value !== form.id"
>
</el-option>
相关推荐
hachi031311 分钟前
Vue中input disabled时点击事件不触发怎么办?
javascript·vue.js·ecmascript
BestSongC15 分钟前
基于VUE和FastAPI的行人目标检测系统
vue.js·人工智能·yolo·目标检测·fastapi
华仔啊30 分钟前
20个CSS实用技巧,10分钟从小白变大神!
前端·css
起名时在学Aiifox32 分钟前
Vue3 + Element Plus 表格排序实战:基于状态字段的智能排序方案
前端·javascript·vue.js·element plus
再吃一根胡萝卜36 分钟前
从 Element UI 到 Element Plus:el-table 大数据量性能为何下降了?
前端
转转技术团队38 分钟前
转转UI自动化走查方案探索
前端
yzx99101342 分钟前
基于Flask的智能语音增强系统模拟
前端·javascript·html
青衫码上行1 小时前
【Java Web学习 | 第14篇】JavaScript(8) -正则表达式
java·前端·javascript·学习·正则表达式
草帽lufei1 小时前
解锁AI新维度:深入体验Google Antigravity的Gemini3模型
前端·ai编程·gemini
CoolerWu1 小时前
TRAE SOLO实战:一个所见即所得的笔记软体
前端·trae