vue+antd使用a-select 多选, a-casader 图标展示不全

最新推荐文章于 2024-05-28 14:54:17 发布
最新推荐文章于 2024-05-28 14:54:17 发布
阅读量943 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42272253/article/details/119893007
版权

17年的老项目,引入了antd，但是没用过，用之后发现这个问题，第一个都展示图标，红框画的应该有图标却没有展示
在这里插入图片描述
在这里插入图片描述
原因：打包时external加了vue,在index.html中为了打包体积引入了 vue.min.js

问题出在了vue.min.js上，不完整
引入vue.js 问题解决

江浸月~~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant-design-vue。下拉框a-select设置样式不显示的
MR_Shi_it的博客
11-30 1146
刚开始尝试了很多种方式，例如，deep..啦，还有官方自带的dropdownStyle属性，最离谱还看见一个文章 再index.html文件中设置样式，但是这样可以设置成功，但我相信，一个稍微资深一点的vue开发者都不想再index.html中设置样式，包括后期管理起来不方便什么的...。只有在 value = undefined 才会显示，对于其它的 null、0、'' 等等对于 JS 语言都是有意义的值。这个属性还有一点好处，就是如果下拉框有的时候点击或者滚动页面的时候，下拉框也会跟着滚动。
自定义带图标的select，只需把图标地址写在option的title属性中即可
01-31
基于Jquery的自定义下拉框JS插件。 带图标、分组等
vue antd a-select支持模糊查询，并支持多项查询
最新发布
weixin_52493208的博客
05-28 364
【代码】vue antd a-select支持模糊查询，并支持多项查询。
ant design 1.7.8 a-select组件,在右侧增加搜索图标
weixin_42579969的博客
01-13 567
Ant Design 1.7.8 版本中 a-select 组件默认是没有提供右侧搜索图标的。你可以自己定义一个组件来实现这个功能，例如在 a-select 组件外层套一个 a-input，并在 a-input 的右侧使用 a-icon 组件添加搜索图标。 ...
Ant Design Vue子表格无法展开
陈新科的博客
09-27 766
最近使用ant_desgin 做嵌套子表格数据的展示。 发现写好了点击展开子表格无法展开，最后发现是从后端给的数据没有id号 因为之前的数据都绑定这id所以可以展开，展开应该是根据唯一值rowkey的 <a-table :expandRowByClick="true" :columns="columns" :data-source="datas" :row-key=
【antd】解决antd中 Select多选下来不显示
gz-郭小敏的博客
04-22 3223
背景： 1.Select多选下来不显示 2.使用suffixicon也不生效 原因： showArrow 的官方解释是是否显示下拉小箭头，值类型是boolean，默认值给的是：单选默认是true，多选默认是false。
Ant Design Vue组件，a-select标签
h360583690的博客
07-16 1869
Ant Design Vue组件，a-select标签
vue-antd-admin:基于vue3 + antd + JavaScript的后台系统
03-11
vue-antd-admin欢迎使用vue-antd-admin，这是一个基于vue3.0 + antd2.0.0 + vuex4.0 + vue-router4.0的适合新手学习的项目，后台全部采用了composition API的写法，作者也只是个刚出学校的初级菜鸟前端，在vue3的...
个人搭建博客系统，实现使用springboot+mybatisplus+vue+antd。noodb-blog.zip
05-15
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server ...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
【Ant Design Vue】全屏时a-select下拉框选项消失
phhz的博客
03-09 763
【代码】【Ant Design Vue】全屏时a-select下拉框选项消失。
ant design vue treeDefaultExpandAll 更换数据后没有自动展开
动感超人的博客
11-13 828
我暗恋的说眼睛疼了，所以我买了眼药水寄过去了，但他告诉我他有喜欢的人了，让我别再打扰，距离遥远，顺丰要三天才到，可他为什么一秒钟就把眼药水滴在我眼睛里。突然想找你聊天，打开窗口，发现上次的结尾是我，你没有回，又欲言又止了。每天都翻你的朋友圈，点开你的头像，偷偷看你的微博，寻找着有关你的任何消息。宝～今天我找你，你叫我哪凉快哪呆着去，你可真心疼我，知道天气这么热，这么关心我，我太爱你了我的宝贝～就算我今天把话说得再绝，明天醒来我还是会喜欢你，就是这么没出息，这你知道…想着谁，就要告诉谁，不然白想了。
select标签中的单选和多选解决办法
www520507的专栏
04-02 3022
 昨天一朋友问到我关于SELECT实现多选的问题,平时只注意到单选,从没有留意多选,暴汗`````后来在网上查了些例子,感觉多多少少多有些错误.现纠正了保存一份正确的供大家参考.不足之处还望多多指教:)    New Document            function $(selectName){return document.getElementById(selectNam
vue-tree-select 显示多少个tag
ljljlj1993的博客
10-23 2359
a-tree-select中如果选中多个数据,不去设置他的tag,那么会一直显示我们选中的数据,如图,输入框就会一直被拉长 那么为了避免这种情况,可以直接给a-tree-select加上他的属性maxTagCount ...
select标签单选多选详解
zh921112的专栏
07-03 3298
select元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name属性。 一、基本用法：  Volvo  Saab  Opel  Audi 其中，标签可以省掉，在页面中用法 SELECTNAME="studyCenter"id="studyCenter" SIZE
select标签下拉选项一直显示第一项的问题？ onchange()事件
changfangyuansh
08-16 2184
愚蠢的问题：<select>下拉选项一直显示第一项的问题？ 原因：onchange从这个名称就可以看出，只有在select的选项有改变（change）的时候才会触发这个事件的。一般情况下select的第一个选项是默认选项，当你选中第一个项时，由于值没有改变，所以是不会触发onchange事件的。 解决：可以通过selected来改变值 jq: window.onlo...
【AntDesign】select组件选中后显示其他而不是选中项
芳草萋萋鹦鹉洲哦
03-02 1583
原因：a-select标签和a-select-option标签分别绑定了两个值导致显示出错 解决方法：删除<a-select-option>里的:value只留<a-select>绑定相关值的语句 <a-select v-decorator="[ 'productType', { rules: [{ required: true, message: '请选择产品类型' }]
ant + vue3 : a-select标签在编辑时，回显问题
weixin_54531594的博客
07-25 6100
ant+vue3 a-select 标签编辑时的数据回显问题记录
Vue+ElementUI使用el-select multiple 单选或多选需要回显怎么设置
06-10
在Vue+ElementUI中使用el-select组件进行单选或多选时，可以通过设置v-model来绑定选中的值，并且根据el-select组件的multiple属性来决定是单选还是多选。 单选时，v-model绑定的是一个普通变量，当用户选择一个选项时，v-model变量会被更新为选中的值。例如： ``` <el-select v-model="selectedItem"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> <el-option label="选项4" value="option4"></el-option> </el-select> ``` 其中，`selectedItem`是一个普通变量，用来保存选中的值。当用户选择一个选项时，`selectedItem`变量会自动更新。 多选时，v-model绑定的是一个数组，用来保存选中的值。例如： ``` <el-select v-model="selectedItems" multiple> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> <el-option label="选项4" value="option4"></el-option> </el-select> ``` 其中，`selectedItems`是一个数组，用来保存选中的值。当用户选择一个或多个选项时，`selectedItems`数组会自动更新。 要回显已选中的值，只需要将v-model绑定的变量或数组初始化为已选中的值即可。例如： 单选回显： ``` <template> <el-select v-model="selectedItem"> <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 { selectedItem: "option2", // 已选中的值 options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" }, { label: "选项4", value: "option4" }, ], }; }, }; </script> ``` 多选回显： ``` <template> <el-select v-model="selectedItems" multiple> <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 { selectedItems: ["option2", "option4"], // 已选中的值 options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" }, { label: "选项4", value: "option4" }, ], }; }, }; </script> ``` 在上面的例子中，`selectedItem`变量或`selectedItems`数组被初始化为已选中的值，因此在页面加载时，已选中的选项会被自动回显。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值