vue3.0+element plus+vite打包后el-select列表为空的问题

最新推荐文章于 2024-04-23 11:53:53 发布
最新推荐文章于 2024-04-23 11:53:53 发布
阅读量951 收藏 1
点赞数 1
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caizitjl/article/details/122172937
版权

最近项目中遇到了本地运行项目，el-select可正常显示，但打包部署上线后却出现了下拉列表为空的问题，百度了许久也没找到解决方法，遂随笔记一下。

本地跑起来下拉框可正常显示：

打包部署后列表为空：

再三尝试下发现是element plus版本问题，将原先的1.0.2-beta.53升级为1.0.2-beta.70再重新打包后运行，发现打包失败，将main.js或main.ts中import 'element-plus/packages/theme-chalk/src/base.scss去掉就可以正常打包了，下拉列表便可正常显示。但又遇到了新的问题，此时项目图标都变成了小方块，百度后发现是vite版本问题，于是将vite版本从2.3.8降级为2.3.7再重新打包运行，图标又出现了。

菜鸡田
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3.0+element-plus实现国际化语言，动态路由菜单demo
01-27
vue3.0+element-plus实现国际化语言，动态路由菜单demo
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能vue-cli版： : vite版： :系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等
最新发布
前端技术
04-23 816
《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ........
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui中的el-select下拉框选中不显示问题
热门推荐
lxiang222的博客
10-24 2万+
最近在使用element的el-select时出现了一个奇怪的坑，就是当我选中了下拉框的内容之后但是下拉框中不展示选中的label值，具体代码如下，先展示出现问题的代码 <el-form-item label="推荐产品一："> <el-select filterable v-model="detail.recommendProductId" clearable @chang...
element-ui select下拉框默认值
qq_34182649的博客
08-15 1339
先上代码 <el-select v-model="addForm.school" placeholder="请选择学校"> <el-option v-for="item in schools" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> 我是用 v-model=
关于Vue Element组件el-checkbox与el-select默认选中值的几点注意事项
weixin_44519496的博客
08-02 1378
el-select 示例： 代码： <el-select v-model="doc.zhic" placeholder="请选择"> <el-option v-for="(item,index) in zhicdata" :key="index" :label="item.name" :value="item.id" >&l
el-select下拉框没有数据
qq_45327886的博客
03-21 1万+
el-select给options赋值后,下拉框无数据
用el-select处理后台数据进行页面渲染，返回数据如果为空或者无法渲染文字时的处理
yzx125的博客
03-12 3583
用selecet处理后台数据进行页面渲染 最近用select做下拉选择器的时候，出了一些bug。具体表现为无法从后台渲染数据到选择器中或者选择器中的文字不显示。 我的返回数据是这样的： 组件部分： <el-select v-model="name" placeholder="请选择" @change="handleChange2()" clearable :options="options2" :props="optionProps2">//v-model的值根据自己的需
el-select下拉框有数据无显示
qq_45371797的博客
04-24 2563
vue+element中el-select组件有数据不显示或者下拉框错位
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
bbt953的博客
04-18 6084
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
Vue中使用select2无法获取数据问题
元仙僧的博客
06-26 3921
在vue项目中使用jquery的select2插件，无法获取到下拉框的值，后来看文档通过封装组件的形式解决了这一问题 * select2封装 */ Vue.directive('select2', { inserted: function (el, binding, vnode) { let options = binding.value || {}; ...
vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
weixin_44900104的博客
08-15 1万+
vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
element 下拉框不显示下拉数据的问题
Mattscl的博客
12-05 3891
解决方法:添加:popper-append-to-body="false"属性 如： <el-form-item label="活动区域"> <el-select v-model="form.region" :popper-append-to-body="false" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"><
element-ui 表单校验，el-select校验失效问题
m0_66899315的博客
04-29 1万+
element-ui 表单校验，el-select遇到了校验失效问题，有值的情况下，校验规则并没有对应消失
select下拉选择第一个选项为空白、option无法选中的解决办法，
qq_31620497的博客
05-17 1万+
问题：&lt;select ng-model="id"&gt; &lt;option value="{{v.id}}" ng-repeat="v in list" ng-bind="v.name" ng-selected="v.id == id"&gt;&lt;/option&gt; &lt;/select&gt;第一个选项为空白；或者
避坑19_elementui校验空值，错误提醒不消失
linxwx的博客
11-21 688
没有给el-forem加上:model="ruleForm"
vue3.0+element Plus表单校验
05-28
在Vue3.0中，可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。 下面是一个使用Element Plus表单校验的示例： 1. 在Vue3.0项目中，首先需要先安装Element Plus组件库： ``` npm install element-plus --save ``` 2. 在需要使用表单校验的组件中，引入Element Plus的表单组件和校验规则： ```javascript <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const form = ref({ username: '', password: '', }); const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, ], }); const submitForm = () => { // 表单校验 const formRef = this.$refs.form; formRef.validate((valid) => { if (valid) { // 校验通过 console.log('submit'); } else { // 校验不通过 console.log('error submit!!'); return false; } }); }; return { form, rules, submitForm, }; }, }; </script> ``` 在上面的示例中，我们使用了Element Plus的表单组件和校验规则来实现表单校验，其中： - `ElForm`：表单组件，用于包裹需要校验的表单项； - `ElFormItem`：表单项组件，用于包裹表单控件和校验规则； - `ElInput`：输入框组件，用于输入表单数据； - `ElButton`：按钮组件，用于提交表单数据； - `ref`：Vue3.0中用于获取组件实例的方法。 在`setup()`函数中，我们使用了`ref`来定义表单数据和校验规则，并且定义了一个`submitForm()`方法来提交表单数据，其中： - `validate()`：表单校验方法，用于校验表单数据是否满足校验规则； - `valid`：校验结果，如果校验通过则为`true`，否则为`false`。 总体来说，使用Element Plus的表单校验功能非常简单，只需要在需要校验的表单项中定义相应的校验规则，并在提交表单时调用`validate()`方法即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值