vue- elementui-Steps中的description 如何多行显示

最新推荐文章于 2024-02-27 16:17:00 发布
最新推荐文章于 2024-02-27 16:17:00 发布
阅读量7.3k 收藏 6
点赞数 4
分类专栏： vue 文章标签： vue- elementui-steps中的descript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41563161/article/details/102988931
版权
在Vue ElementUI的Steps组件中实现description多行显示的方法是利用Vue的插槽功能，创建一个名为description的template插槽。通过这种方式，可以自定义多行内容展示，进一步了解和学习插槽的使用是必要的。
摘要由CSDN通过智能技术生成

           vue- elementui-Steps中的description 如何多行显示

摘自https://blog.csdn.net/M612a34/article/details/84572689 

 <div class="approvalProcess" style="backgroung-color:background-color:#DFEBFF;" >
 
      <div  class='approvalProcess_left'>
        <el-steps :active="active" finish-status="success" direction="vertical">
           <el-step :title="item.label"  v-for="item in approvalProcessProject" :id="item.id">
 
           </el-step>
        </el-steps>
         <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
      </div>
 
      <div class='approvalProcess_right'> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="processing_content">
                         <tr>
                            <td >
                            	<div class="processing_content_detail" style="float:left;width:70%"><span class="title_tjname">申请人&nbsp;&a
最低0.47元/天 解锁文章
haikuotiankongdong
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE element-ui响应式步骤进度条样式代码
06-11
几款简单的基于VUE element-ui响应式步骤进度条样式代码，active往里传值即可显示步骤。
Vue进阶（贰零壹）：el-steps 实现页面内导航
最新发布
2401_85124192的博客
06-19 539
下面重点介绍el-steps的directionspaceactive属性，如下:通过查看Element手册，需要定宽的步骤条时，设置space属性即可，单位为px，如果不设置为自适应（若不确定步骤条中每一步骤中内容高度或宽度，可设置为自适应；为使界面美观，可修改el-stepimportant;important;important;el-step属性如下图所示：这里重点介绍下如何应用el-steps动态展示所需信息。
vue elementui steps组件在步骤条中添加自定义样式内容
热门推荐
M612a34的博客
11-27 4万+
由于对于vue了解不够深入，导致今天写这个组件浪费了很多时间。后来一个大神同事给我指点了一下。 想做成如图所示的样式的步骤条，使用vue elementui的steps组件做。 最简单的在组件中插入代码实现样式的方法时行不通的 &lt;div style="height: 300px;"&gt; &lt;el-steps direction="vertical" :active="...
elementUi el-steps步骤条封装成能多行展示
weixin_47701365的博客
06-29 1937
不是原创,是看个某个例子然后自己改了下,那个例子链接忘记保存了。如图,一行只能放七个进度,多了会换行展示,上组件代码。rem是做了我自己项目的适配,可根据自己需求改动。
【el-steps 步骤条自定义样式】
qq_42250468的博客
02-27 1979
el-step title="2023-12-13 13:01:00" description="XX报警" /><el-step title="2023-12-13 13:01:05" description="短信通知至：张三" /><el-step title="2023-12-13 13:01:05" description="微信通知至：李四" /><el-step title="2023-12-13 13:02:50" description="后续继续处理" />// 自定义样式。
【无标题】【element-ui】 steps自定义进度图标及完成等状态图标
weixin_43410997的博客
01-17 1365
效果图1.html部分2.css部分在这里插入代码片//process状态自定义图片//不显示圆圈top: -2px;left: -2px;//不显示内部数字。
vue-elementUI后台管理系统.zip
04-30
技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 本项目的定位是后台管理系统，已经完成模块有用户管理、菜单管理、角色管理、公司管理、权限管理、支付配置。 技术...
vue-elementui-admin
03-20
在这个"vue-elementui-admin"项目中，开发者可以利用Vue.js的生命周期钩子函数、计算属性、指令等功能，结合ElementUI的组件，快速构建出功能完备的后台管理界面。例如，使用`v-for`指令来循环渲染列表数据，使用`v-...
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
vue-elementUI公司后台管理系统
11-13
vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 项目预览 http://nmgwap.gitee.io/vueproject/#/login 登录 -- 完成 路由拦截 -- 完成 商品管理（增加、编辑、搜索、删除...
基于VUE步骤进度条样式代码.zip
07-04
脚本简介基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
vue-bpmn-element:bpmn.js流程设计器组件，基于vue-elementui美化属性面板，满足90％以上的业务需求
03-20
1、调整设计器UI布局，基于vue-elementui美化属性面板 2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求 3、支持flowable和activiti 组件常用方法 1，配置支持flowable（激活） < vue xss=removed>...
vue Element admin (步骤条样式)
weixin_58856770的博客
06-23 427
vue Element admin (步骤条样式)
elementUI Steps 步骤条 样式以及方法使用
weixin_36723038的博客
01-31 4870
elementUI步骤条，CSS改变步骤条状态样式
vue 自定义步骤条样式
JunRoyal
09-02 2439
<!-- 顶部步骤条 --> <div class="createorder_top"> <div class="createorder_top_left"> <span class="createorder_left_set" :class="activeNum == 0 ||activeNum ==1||activeNum ==2?'activeSet':''" &gt.
Vue3步骤条（Steps）
Mr Dear的博客
04-06 6196
引导用户按照流程完成任务的导航步骤条，支持：两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；并且可点击；总之，功能丰富，简单易用😁😁
vue 步骤条： 虚线样式、进度条
m0_59329255的博客
11-10 139
111
element步骤条＜el-steps＞使用具名插槽自定义
weixin_42949219的博客
12-25 3344
/
vue-elementui中表格搜索
08-29
在Vue-ElementUI中实现表格搜索的方法有多种。根据引用中的内容，你可以使用自定义的computed属性来实现表格搜索功能。具体步骤如下： 1. 首先，你需要在你的Vue组件中添加一个搜索框用于输入关键字。 2. 然后，你可以在computed属性中创建一个新的属性，例如"tables"，用于存储过滤后的数据。 3. 在"tables"属性的定义中，你可以使用filter()方法对"tableData"进行过滤，只保留那些包含搜索关键字的数据。 4. 在filter()方法中，你可以使用Object.keys()方法获取对象数组的所有枚举属性，然后使用some()方法进行匹配判断，只要有一个属性匹配成功，就返回整个对象。 5. 在匹配时，你可以将对象属性的值转换成小写，并使用indexOf()方法来判断是否包含搜索关键字。 6. 最后，根据搜索框中是否有值，来返回过滤后的数据或者全部数据。 下面是一个示例代码供你参考： ```javascript computed: { tables() { let search = this.search.toLowerCase(); if (search) { return this.tableData.filter(data => { return Object.keys(data).some(key => { if (data[key !== null) { return data[key].toString().toLowerCase().indexOf(search) > -1; } }); }); } else { return this.tableData; } } } ``` 通过以上步骤，你就可以在Vue-ElementUI表格中实现搜索功能了。注意，其中的"tableData"是你需要展示在表格中的数据，"search"是搜索框中输入的关键字。你可以根据自己的实际情况进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue+element-ui的表格组件实现简单的搜索框功能](https://blog.csdn.net/kurodasense/article/details/122782200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue-elementui-tree-table.rar](https://download.csdn.net/download/qq_32442967/12015371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haikuotiankongdong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值