草庐IT

el-button-group

全部标签

el-table相同数据行单元格合并

el-table列表相同内容合并背景实现步骤1.绘制el-table2.编写合并方法2.1计算合并的行号2.2计算合并行号数组**indexArray**。2.3编写行号合并方法3.全部代码背景项目中列表第一列是名称,需要实现的效果是相同名称的行合并,如图所示:实现步骤1.绘制el-table按照常规的写法绘制一个表格,根据官方文档element-ui介绍编写表格合并规则方法。代码示例中的span-methodel-tablev-loading="listLoading":data="list":span-method="objectSpanMethod">el-table-columnpro

微信小程序原生button组件使用并修改样式

 想使用原生button组件,但是想使用不同样式登录注意type使用得type必须和修改时选择器样式(button[type=default])一样,才能对其修改样式,否则样式不会被修改 //重写button样式 button[type=default]{ background-color:#bc2840; color:#FFF; height:80rpx; line-height:80rpx; }如果是多端适配,需要使用type为default再修改样式 

elementui el-input输入框金额显示 千分符与输入框 金额输入框 表格或列表中的金额输入框

1、实现思路当用户不对输入框进行任何处理时,将数值转成千分符形式,例如12,345.67格式,在用户点击金额进行输入修改操作的时候,显示的数值形式12345.67,并且用户在输入过程中禁止输入中文、英文、特殊符号、英文逗号等,只能输入数字、一位小数点、小数点后2位;修改输入框内容时,更新表格合计值。2、截图效果3、实现代码el-tableref="table"border:data="tableData"v-loading="loading"max-height="300"show-summary:summary-method="getSummaries">el-table-columntyp

修改(elementui)el-table底层背景色

1.需求:仅修改当前页面的背景色,不修改所有el-table的背景色。先给table添加类名(如class="styleTable")在style上面添加scoped写法:类名::v-deep.el-table类名{}注意:给styleTable也设置背景色为透明才生效。如下图所示👇2.需求:修改全局背景色单独创建一个css文件,给el-tableth,el-table_cell等你要修改的类名添加背景色为透明;在每个vue页面都引用此文件即可生效。扩展(也可以不用看)需求:设置table的最低高度把padding的值设为0即可。.el_table.el_table_cell{padding:

封装通用el-form表单(2种方式)

1、序言         项目地址:gitclone form-demo:封装通用el-form    一个后台管理系统最常见的是表单,表单最常见的是输入框、下拉选择、日期选择、单选、复选框等等,系统添加若干模块,就复制粘贴若干个el-form、el-form-item,有一说一,完成需求快是快,但是代码冗余的部分太多了,能不能通过配置方式,自动生成el-form、el-form-item        不封装代码前:    封装代码后:    两种封装方式的变量、方法名基本一致!2、自定义组件方式封装el-form        2.1、封装    (1)新建commentForm文件夹,并

LVGL core group焦点分组管理(lv_group.c)

更多源码分析请访问:LVGL源码分析大全目录1、概述2、源码分析2.1、默认焦点分组2.2、自定义焦点分组2.3、焦点分组运行逻辑2.4、焦点分组的使用2.5、焦点的使能2.6、焦点分组的冻结3、APIs3.1、lv_group_create3.2、lv_group_del3.3、lv_group_set_default3.4、lv_group_get_default3.5、lv_group_add_obj3.6、lv_group_swap_obj

element-ui组件Popover 弹出框,el-popover样式、定位以及二次确认弹出框自动关闭 问题

先说定位问题如果往里边动态添加内容,定位偏移下面是解决办法:绑定ref,最关键的是有这行代码:popper-options="{boundariesElement:'viewport',removeOnDestroy:true}"直接粘贴就行,这是html部分,在js部分也有一行代码click激活这是JS部分代码,this.$refs.popoverRef.updatePopper()这行代码意思是数据更新完重新计算位置,写在$nextTick里确保一定是数据更新完成之后,这几行代码放在你动态更新el-popover里的内容那行代码之后this.$nextTick(()=>{this.$ref

element-ui el-table分页后设置连续的索引(如排行榜)

目录 1、自定义 type=index 列的行号2、自定义indexMethod方法3、效果 1、自定义 type=index 列的行号通过给type=index的列传入index属性,可以自定义索引。该属性传入数字时,将作为索引的起始值。也可以传入一个方法,它提供当前行的行号(从0开始)作为参数,返回值将作为索引展示。{{row.product_name}}ID:{{row.product_common_id}}{{row.norm}}/{{row.unit}}2、自定义indexMethod方法//vue3constindexMethod=(index)=>{returnindex+1+(

Element UI el-row el-col实现一行5列

ElementUIel-rowel-col实现一行5列1、实现效果2、代码1、实现效果2、代码el-row:gutter="20">el-col:span="5">info-cardlabel="装机容量":num="stationInfo.capacity?stationInfo.capacity:'--'"numColor="#15BC83"numUnit="kWh":icon="require('@/assets/card/icon_card_cnzgl.png')"/>/el-col>el-col:span="5">info-cardlabel="投运时间":num="stationI

微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image

微信小程序常用组件的简单使用1.view组件2.scroll-view组件3.swiper和swiper-item组件3.1.swiper组件中的常用属性4.text和rich-text组件4.1.text组件4.2.rich-text组件5.button组件6.image组件6.1.image的mode属性1.view组件view组件就类似于html中的div标签list.wxmlviewclass="container1">view>Aview>view>Bview>view>Cview>view>list.wxss.container1view{ width:100px;height:1