【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>
相关推荐
dy17171 分钟前
element-ui输入框换行符占位问题处理
vue.js·elementui
oMcLin4 分钟前
如何在 CentOS 7 上通过配置和调优 OpenResty,提升高并发 Web 应用的 API 请求处理能力?
前端·centos·openresty
IT_陈寒5 分钟前
Java开发者必知的5个性能优化技巧,让应用速度提升300%!
前端·人工智能·后端
小马_xiaoen10 分钟前
Vue3 实现超丝滑打字机效果组件 - 进阶
javascript·vue.js·ecmascript
小二·12 分钟前
Python Web 开发进阶实战:前端现代化 —— Vue 3 + TypeScript 重构 Layui 界面,打造高性能 SPA
前端·python·typescript
cnxy18823 分钟前
Python Web开发新时代:FastAPI vs Django性能对比
前端·python·fastapi
神仙姐姐QAQ24 分钟前
vue3更改.el-dialog__header样式不生效
前端·javascript·vue.js
脾气有点小暴24 分钟前
uniapp真机调试无法连接
前端·uni-app
AI_567826 分钟前
Vue.js 深度开发指南:从数据绑定到状态管理的最佳实践
前端·javascript·vue.js