element下拉菜单多选超出

最新推荐文章于 2024-06-27 14:27:32 发布
最新推荐文章于 2024-06-27 14:27:32 发布
阅读量786 收藏 1
点赞数
文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_13201/article/details/110798284
版权

一：出现的问题

在这里插入图片描述
二：修改

.el-select__tags {
      width: 100%;
      display: inline-block;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

在这里插入图片描述
三：更改后
在这里插入图片描述

Jack_13201
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element ui 下拉多选时新增一个选择所有的选项
10-16
主要介绍了Element ui 下拉多选时 新增一个选择所有的选项,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
element ui分页多选,翻页记忆的实例
10-16
今天小编就为大家分享一篇element ui分页多选,翻页记忆的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[Vue 前端] Vue前端联调后台遇见的问题:多选
汤圆的博客
08-20 1140
<el-input v-model="form.tele" style="width:160px;" maxlength="11" placeholder="请输入账号" type="number"></el-input> maxlength使用这个属性 没有生效 就使用下面的 限制长度了oninput 记个笔记 这也是别人那里看的 <el-form-item label="城市代码" :label-width="formLabel...
el-select多选时，显示多个tag后再+n
qq_46456709的博客
06-03 299
【代码】el-select多选时，显示多个tag后再+n。
用elementui，实现在表格中的tag标签显示，如果他的元素个数大于3个，那么第三个标签就显示+几，鼠标移动显示剩余元素，如果＜=3,就正常显示
qq_51846847的博客
06-19 1155
如果 slotProp.row.material_type_name 有 5 个元素，且它们分别是 "材料1"、"材料2"、"材料3"、"材料4"、"材料5"，那么显示出来的 tag 将会是 "材料1"、"材料2"、"+3"，鼠标上移显示剩余元素。如果 slotProp.row.material_type_name 3个元素，且它们分别是 "材料1"、"材料2"、"材料3，那么显示出来的 tag 将会是 "材料1"、"材料2"、"材料3",写出代码。如果slotProp.row.material_type
el-select多选超过两个选项省略
最新发布
小谭鸡米花的博客
06-27 488
Element下拉框多选的时候有个毛病，就是选的数量过多就会把下拉框撑高，从而影响布局；但是如果使用了里面collapse-tags属性，element设置的只显示一个，超过一个就隐藏省略了，所以，针对以上限制，小谭做出了超过多个选择才省略的效果
elemnt-下拉多选文本超出内容
csstmg的博客
01-05 100
处理方式单独一行,超出隐藏 /deep/.el-select__tags-text { display: inline-block; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /deep/.el-select .el-tag__close.el-icon-close { top: -5px; }
element ui的select下拉框实现多选数据回显
$
08-03 5561
效果图： 思路：v-model绑定的是一个数组，里面包含你所选择的值，拿到的是一个串数字，需要转为字符串，再转按逗号分隔成数组进行赋值。 代码： <p class="adzjgs"><span>护士姓名：</span> <el-select multiple v-model="mnurseId" :multiple-limit=3> <el-option :value="item.id" v-fo
element ui 下拉多选问题整理
qq_43122566的博客
04-07 915
多选在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。$forceUpdate()迫使vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。5.提交表单时，即变成了['4','5','7']2.接收后台返回字段并将字符串转换为数组。1.后台返回数据格式。
ElementUI Checkbox 多选框 超过xx条显示更多
小猫爪子
05-06 602
点击 更多 <template> <el-row class="font-2"> <el-col :span="4">数据来源</el-col> <el-col :span="20"> <el-checkbox-group v-model="dataSourceChecked"> <el-checkbox v-show="dataSourceMore" v-if="index < 4" v-.
日常开发记录--elementUI中的el-select下拉框多选显示的文本内容过长导致显示溢出框外...
machine_vision123的博客
05-26 1112
el-select 选中内容溢出框外解决方案： // my是自己创建的最外层类名 提高样式权重 .my .el-select__tags-text { display: inline-block; max-width: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .my ...
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在Vue Element UI中，`Select`组件是一个常用的下拉选择器，它提供了丰富的功能，如分组、多选和搜索。在本示例中，我们将深入探讨如何将这些特性结合起来，实现一个完整的分组+多选+可搜索的`Select`选择器。 首先...
封装element-ui下拉树状多选单选.zip
04-28
本项目"封装element-ui下拉树状多选单选.zip"正是基于此框架，对原有的el-tree（树形组件）和el-select（选择器组件）进行了定制和封装，以满足更复杂的需求。 首先，让我们详细了解一下el-tree组件。Element UI 的...
Element ui 选择器选项超出选择框
莘栀的博客
01-10 1049
Element ui 选择器进行多选时，选择项若比所设置的框体宽，默认不会自动换行,这样的话，界面样式会不好看，解决办法是加个样式 代码: <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域" multiple> <el-option label="特别长的一个文本，超过了文本框的长度" value="shanghai2">&lt.
el-select 多选溢出 collapse-tags属性/下拉框列表分两列展示
qq_42947973的博客
11-17 3631
el-select 多选溢出 collapse-tags属性/下拉框列表分两列展示
el-select多选以tag展示时，超过显示长度以...省略号显示，且在一行展示
m0_67841039的博客
11-06 1497
【代码】el-select多选以tag展示时，超过显示长度以...省略号显示，且在一行展示。
修改el-select多选时collapse-tags模式下设置宽度，超出...
Koreyoshi123654的博客
07-03 2572
修改el-select多选时collapse-tags模式下设置宽度，超出...
el-select多选以tag展示时，超过显示长度以...省略号显示
一直在水些技术小文
03-03 9220
这里记录一个样式问题，我们知道element-ui给我们提供了多选时的tag形式展示，但是当tag标签过长时，会出现“溢出”的情况； 注意：① 一个tag文字过长需要溢出隐藏，超出部分… 显示 ② 多个tag卡片溢出隐藏，超出部分…显示 比如我在设置第一个之后，第二个框要把上面那个禁止掉，多选的时候，需要对样式设置一下； 下面直接上代码： 模板文件代码如下： <el-form-item label="应用Id" prop="client_id"> <el-auto
VueX+Element Plus下拉菜单多选后，下拉菜单里能够回显选择的数据
06-10
在 VueX 中，可以通过 mutations 来修改 store 中的数据，从而实现下拉菜单选中数据的回显。 具体实现步骤如下： 1. 在 store 中定义一个名为 `selectedOptions` 的数组变量，用于存储选中的数据。 2. 在 mutations 中定义一个名为 `addSelectedOption` 的方法，用于将选中的数据添加到 `selectedOptions` 数组中。 3. 在 mutations 中定义一个名为 `removeSelectedOption` 的方法，用于将取消选中的数据从 `selectedOptions` 数组中移除。 4. 在下拉菜单组件中，通过 `v-model` 绑定 `selectedOptions` 数组，并在 `change` 事件中触发 mutations 中的 `addSelectedOption` 和 `removeSelectedOption` 方法。 5. 在下拉菜单组件中，通过 `v-bind:selected` 绑定一个计算属性，判断该选项是否被选中，从而在下拉菜单中显示选中的数据。 示例代码如下： store.js： ``` import { createStore } from 'vuex'; const store = createStore({ state: { selectedOptions: [], }, mutations: { addSelectedOption(state, option) { state.selectedOptions.push(option); }, removeSelectedOption(state, option) { const index = state.selectedOptions.indexOf(option); if (index !== -1) { state.selectedOptions.splice(index, 1); } }, }, }); export default store; ``` 下拉菜单组件： ``` <template> <el-select v-model="selectedOptions" multiple @change="handleChange"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :selected="isSelected(option)"> </el-option> </el-select> </template> <script> import { computed } from 'vue'; import { mapMutations } from 'vuex'; export default { computed: { ...mapMutations(['addSelectedOption', 'removeSelectedOption']), selectedOptions: { get() { return this.$store.state.selectedOptions; }, set(value) { this.$store.state.selectedOptions = value; }, }, options() { return [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, { value: 'option4', label: '选项4' }, ]; }, isSelected() { return (option) => { return this.selectedOptions.includes(option.value); }; }, }, methods: { handleChange(value) { const selected = value[value.length - 1]; const isSelected = this.selectedOptions.includes(selected); if (isSelected) { this.removeSelectedOption(selected); } else { this.addSelectedOption(selected); } }, }, }; </script> ``` 在上面的例子中，通过 `mapMutations` 将 mutations 中的 `addSelectedOption` 和 `removeSelectedOption` 方法映射到组件中。在 `selectedOptions` 计算属性中，使用 `get` 和 `set` 方法来获取和设置 store 中的 `selectedOptions` 数组。 在 `isSelected` 计算属性中，定义了一个箭头函数，用于判断选项是否被选中。在 `el-option` 组件中，通过 `v-bind:selected` 绑定该计算属性，从而实现下拉菜单中选中数据的回显。在 `change` 事件中，根据选中和取消选中的情况，分别触发 mutations 中的方法，修改 store 中的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值