内容太多，想要两列展示操作怎么办（elementui利用下拉el-dropdown展示操作）

最新推荐文章于 2024-04-08 10:21:34 发布
最新推荐文章于 2024-04-08 10:21:34 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： 前端必知 文章标签： vue javascript vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42899245/article/details/110390473
版权

需求：我需要用的操作太多，然后如果全部竖着，就显得太长了（图1）。为了避免这种，所以我就想到了通过 row 和 col 组件，并通过 col 组件的 span 属性自由地组合布局（如图2）。

<el-row><el-col></el-col></el-row>

初始效果如下：
没有两列效果如图
内容太多，想要两列展示怎么办（这里展示的是不全的，可以参考我另一篇https://blog.csdn.net/qq_42899245/article/details/109850244
进行详细查看，这里只截取重点代码）？

在这里插入图片描述
修改成为两列效果如下：
在这里插入图片描述

你知不知
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-table表格数据如何分两列显示_招聘网站的数据分析
weixin_39563827的博客
12-24 658
本文按照下面5个步骤来进行1.提出问题2.理解数据3.数据清洗4.构建模型与分析5.结论接下来是正式的分析1.提出问题1.在哪个城市找到数据分析师的职位概率比较大？2.数据分析职位的薪水是怎么样的水平？3.根据工作年限的不同，薪水是怎么样变化的？2.理解数据利用爬虫爬取招聘网站上的数据，整理成我们需要的Excel表格其中红框里面的是我们需要的字段，它们的含义是：城市：招聘岗位所在的城市公司全名：招...
ng-multiselect-dropdown：多选下拉组件
01-30
入门产品特点具有单/多选择选项的下拉菜单绑定到任何自定义数据源搜索带有自定义占位符文本的项目极限选择选择/取消选择所有项目自定义主题安装npm install ng-multiselect-dropdown然后将其包含在您的模块中（请...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue elementUI实现双（多）列表格，内容均自定义
是日前端
02-07 7158
需求类似这样的： 使用普通table实现，样式需要自己设置： <table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &
elementUI dropdown
最新发布
weixin_42215627的博客
04-08 180
【代码】elementUI dropdown。
基于vue的element组件Checkbox多选框【竖向多列】展示
LzzMandy的博客
08-20 5521
需求：9个国家，每列展示5个，竖向排列 1、分列 对9个国家数组进行截取handleCountrysList(num,countryList.length)，划分每列显示的数据 this.countryList=[ {cid:'1',cname:'中国'}, {cid:'2',cname:'美国'}, {cid:'3',cname:'法国'}, ...
vue的elementUI分两列
userzou的博客
06-03 4656
<el-row> <el-col :span="12"><div class="grid-content"></div></el-col> <el-col :span="12"><div class="grid-content"></div></el-col> </el-row>
vue遍历数据在表格一行两列显示，并显示细线表格
weixin_46256404的博客
12-07 1438
vue遍历数据在表格一行两列显示，并显示细线表格
表单数据和json数据的区别_Django suit admin 将json格式的数据拆分成表单形式展示...
weixin_39710951的博客
12-09 447
需求背景有时候为了配置的灵活性、应用未来的需求变化、控制单张表的字段数，避免字段过多，会把一些字段设置是Json格式。像下面这样：json_field.png这样的好处是，后面如果突然需要加多一个字段，就可以直接在加到这个json里面，既不用修改数据表，也不用修改程序，只要通知前端我在json里面加了一个字段就好了，对于未来字段设置不确定或者随时改变的情况是非常方便。但有一个不好的地方就...
element-ui 动态表单实现一行两列
m0_67273584的博客
08-11 2690
参考element-ui的文档,再用el-row与el-col相结合实现动态表单一行两列功能
使用vue+element的table实现多列checkbox
weixin_45981863的博客
07-17 2174
最近接到一个需求，
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
例如在document.body 自动位置小捆安装npm install --save react-dropdown-select网站动机react-select非常好，但是有时项目要求超出了它的能力范围用法进口： import Select from "react-dropdown-select";...
vant 自定义 van-dropdown-item的用法
10-15
`van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-item` 提供了基础的样式和行为。然而，为了实现更复杂或个性化的布局，我们需要对其进行...
纯CSS设置Checkbox复选框控件的样式
Zoe_Wang_ing的专栏
12-18 2516
from:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。 在本
excel表格怎么调整行高和列宽_8个实用Excel小技巧，谁用谁说好
weixin_39883079的博客
11-18 878
小伙伴们好啊，今天老祝为大家继续一组简单实用的Excel小知识，让效率再高一点点。1 、两列姓名核对如果要核对表二中的姓名在表一中有没有出现，一个公式马上搞定。=IF(COUNTIF(A:A,C2),"是","否")2、所有列缩放到一页打印预览时，会出现有一列单独在另外一页显示了，这时候你是调整列宽还是调整页边距呢？其实只要设置一下缩放，将所有列缩放至一页就OK了。3、整个工作簿替换要替...
vue实现checkbox点击选择控制element-ui table表单动态列展示与隐藏
每文的博客
05-19 4314
要实现的效果： 实现的代码： 首先是数据准备： 复选框数据： const tradeSelections = [ {eng:'tradetype', name:"交易类型"}, {eng:'ordertype', name:"下单类型"}, {eng:'dealnum', name:"成交数量"}, {eng:'dealprice', name:"成交价"}, {eng:'dealline', name:"成交额"}, {eng:'entrustnum', name:.
Vue ElementUI 实现 Table 多列数据 checkBox选择框
热门推荐
qq_23565535的博客
09-07 2万+
日期选择器 日期范围选择器 设置默认时间值 注意事项 value-format=“yyyy-MM-dd hh:mm:ss” 格式化日期选择器 value值格式 :default-time="[‘00:00:00’, ‘23:59:59’]" 实例： <el-date-picker v-model="searchForm.date" value-format="yyyy-MM-dd...
checkbox 实现vue+element table列的显示与隐藏，同时实现选项的拖拽功能
m0_69924991的博客
06-09 1100
实现表格列的显示与隐藏和第三方组件拖拽
vue实现checkbox的显示
facker_CN的博客
05-10 1万+
思考逻辑 大家都知道checkbox的选中状态是按照checked属性来判断的，如下 <input type="checkbox" checked="checked"> <input type="checkbox" checked="true"> 以上的代码都能实现被选中的状态，于是套用vue的语法，很容易写出如下的代码： <input type="checkbox...
el-dropdown-menu如何点击下拉项时展示该项
03-07
的内容？ 您可以使用 el-dropdown-menu 的 slot-scope 属性来实现这个功能。具体来说，您可以在 el-dropdown-menu 中添加一个 el-dropdown-item 组件，并将其绑定到一个变量上。然后，您可以在 el-dropdown-menu 的 slot-scope 属性中使用这个变量来控制展示哪个下拉项的内容。例如： <el-dropdown-menu> <el-dropdown-item v-for="item in items" :key="item.id" :command="item.id">{{ item.name }}</el-dropdown-item> <template slot-scope="{ command }"> <div v-if="command"> {{ items.find(item => item.id === command).content }} </div> </template> </el-dropdown-menu> 在这个例子中，我们使用 v-for 指令来循环渲染 el-dropdown-item 组件，并将每个下拉项的 id 绑定到 command 属性上。然后，我们在 el-dropdown-menu 的 slot-scope 属性中使用 command 变量来控制展示哪个下拉项的内容。具体来说，我们使用 v-if 指令来判断 command 是否存在，如果存在，则展示对应下拉项的内容。最后，我们使用 items.find 方法来查找对应下拉项的内容，并将其展示出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值