element ui
软件测试小菜鸟正在更新中
每一位程序员都不是利益驱动型的而是创新驱动型的
展开
-
el-table去掉外部的边框
el-tablle去掉外边框转载 2022-06-11 13:07:54 · 3663 阅读 · 1 评论 -
动态增删el-input并且单独给每个el-input添加校验信息
动态的el-input增添校验原创 2022-06-08 13:50:39 · 2230 阅读 · 1 评论 -
给el-tree添加自定义图标
<el-tree v-if="treeVisible" ref="tree" :props="Props" node-key="id" :default-expanded-keys="level" style="height:120vh" :allow-drop="allowDrop" draggable accordio.原创 2022-05-17 08:46:52 · 6397 阅读 · 0 评论 -
el-table如何在@row-click里获取点击行的index索引
总结:利用 :row-class-name=“tableRowClassName” 属性给每一行row的数据对象里添加index属性。第一步:给el-table,添加:row-class-name="tableRowClassName"和@row-click=“clickRow”<el-table :row-class-name="tableRowClassName" :data="tableList" border stripe原创 2022-04-13 18:20:15 · 13633 阅读 · 1 评论 -
el-table合并单元格:span-method的使用
合并前是这样:合并后是这样:实现方法:① el-table里添加属性:span-method=“arraySpanMethod” <el-table :data="tableData" :span-method="arraySpanMethod" border stripe fit >②vue文件的 method里定义arraySpanMethod arraySpanMethod({ row, column,原创 2022-04-13 14:20:07 · 3470 阅读 · 0 评论 -
el-table设置单元格里的字体颜色
例如图中,设置某个单元格的字体颜色:① el-table标签上添加属性::cell-style=“cellStyle”<el-table :data="tableData" :cell-style="cellStyle" border stripe fit>②vue文件里在method里声明 cellStyle方法 cellStyle({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || c原创 2022-04-13 14:12:38 · 8816 阅读 · 1 评论 -
el-table设置区域色带
参考这种样式:① 在el-table上定义属性 :cell-class-name=“cellClassFn” <el-table :data="tableData" :cell-class-name="cellClassFn" border stripe fit >② 在method里定义 cellClassFn方法,row是这一行的数据。column是这一列的数据。rowIndex和colunmIndex是行和列的索原创 2022-04-13 13:52:50 · 141 阅读 · 0 评论 -
el-table样式总结—持续更新
1.el-table标签的header-cell-style给指定的表头添加样式 :header-cell-style="getRowClass" getRowClass ({ row, column, rowIndex, columnIndex }) { if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex原创 2022-03-24 10:00:35 · 2061 阅读 · 0 评论 -
el-date-picker的 unlink-panels
这个属性实现了,选择左侧日期框的时候,右侧日期框不跟着改变日期。原创 2022-03-17 11:54:26 · 1085 阅读 · 0 评论 -
npm install错误 unable to access
在git上拉取了一个项目,npm install的时候,出现下面无法访问的错误。下面我的解决方法是:把 npm install改成:npm install --registry=https://registry.npm.taobao.org从淘宝镜像下载就可以成功了。原创 2022-03-08 10:23:14 · 490 阅读 · 0 评论 -
vue中使用this.$loading()给整个页面添加遮罩
如果完整引入了 Element,那么 Vue.prototype 上会有一个全局方法 $loading。调用方法:this.$loading()this.$loading().close()使用步骤:1、完整引入了 Elementimport ElementUI from 'element-ui' // pc端组件2、在向后台发起请求前调用this.loading(),在请求结束后调用this.loading(),在请求结束后调用this.loading(),在请求结束后调用this.lo转载 2022-03-04 13:55:10 · 12498 阅读 · 0 评论 -
一文读懂鼠标滚轮事件(wheelEvent)
https://segmentfault.com/a/1190000017390159?utm_source=tag-newest<template> <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll" > <slot/> </el-s转载 2022-02-09 08:53:47 · 1007 阅读 · 0 评论 -
设置提示框位置随鼠标移动,并解决提示框显示不全的问题
https://www.cnblogs.com/zhilu/p/14047105.htmltooltip: { trigger: 'axis', // position: ['50%', '50%'], position: function(point, params, dom, rect, size) { var x = 0; var y = 0;转载 2022-02-08 16:35:38 · 556 阅读 · 0 评论 -
Element-UI中表格组件的table slot用法slot=“append“
Element-UI中表格组件的table slot用法<el-table><el-table-column type="index" :index="1" label='序号' width='100'></el-table-column><div slot="append" style="text-align: center"> <!--在此处添加你想要插入在表格最后一行的内容--> 测试测转载 2021-12-28 08:33:10 · 7779 阅读 · 0 评论 -
自定义el-table最后一行
自定义el-table最后一行转载 2021-12-27 18:24:05 · 2197 阅读 · 0 评论 -
elementUI 表格设置表头样式总结
参考:https://www.cnblogs.com/lurenjia1994/p/9564369.html转载 2021-12-27 10:03:06 · 1501 阅读 · 0 评论 -
el-table根据el-table-column的数据条数动态设置表格行的高度和字体大小
<el-table :data="tableData" :style="tableStyle" :cell-class-name="cellClassFn" :cell-style="{ padding: '0px' }" :max-height="tableHeight" :row-style="{ height: rowHeight }" border stripe fit >原创 2021-12-27 09:06:09 · 2992 阅读 · 0 评论 -
element ui根据下拉框值动态显示table的表头列
data里定义一个对象,key是表头名称,value是下拉框的选项,代表选择哪一项的时候展示这个表头字段。const colList = { 表头列1: ['选项1', ], 表头列2: ['选项1', '选项2', '选项3', '选项4'], 表头列3: ['选项2', '选项3', '选项4'], 表头列4: ['选项1', '选项2'], }data里声明currentEventName: ‘当前选择项’在table里定义表头:<el-table-column v-原创 2021-12-23 08:37:16 · 1133 阅读 · 0 评论 -
el-input maxlength 不限制长度
详情参考https://www.cnblogs.com/whycai/p/11453533.html转载 2021-12-22 11:24:50 · 855 阅读 · 0 评论 -
关于e.target.value
每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素,然后在获取其相应的属性值。例如:$('.target1').change(function(e) { $("#result").html(e.target.value) });e.target就等价于(′target1′)故e.target.value就等价于('t转载 2021-12-21 08:47:59 · 1109 阅读 · 0 评论 -
dialog对话框中嵌入form表单, 点击el-select下拉框时, 整体的dialog对话框会颤抖一下
dialog 对话框dialog对话框中嵌入form表单, 点击el-select下拉框时, 整体的dialog对话框会颤抖一下出现情况, 一般是修改了class为el-dialog的div的定位方式, 由relative修改为absolute解决方式有两个, 第一个是给class为el-dialog的div固定高度, 第二个是将absolute修改为fixed...原创 2021-12-21 08:29:27 · 738 阅读 · 0 评论 -
el-table在每一行拿到对应的index(scope.$index)
<el-table-column prop="capacity" label="操作" min-width="90" align="center"> <template slot-scope="scope"> <el-button @click="printIndex(scope.$index)">查看Index</el-button> </template></el-table-column>转载 2021-12-10 21:14:46 · 3801 阅读 · 0 评论 -
vue中使用vue-print-nb实现打印功能
第一步:安装 “vue-print-nb”: “^1.7.5”,第二步,页面引入import Print from ‘vue-print-nb’;第三步:声明指令directives: { Print }第四步:使用指令v-print="’#paycode’" <span slot="footer"> <el-button v-print="'#paycode'" type="primary">打印二维码</el-button> </span原创 2021-12-10 13:54:46 · 572 阅读 · 0 评论 -
vue中使用“qrcodejs2“: “^0.0.2“生成二维码
第一步,安装 “qrcodejs2”: “^0.0.2”,第二步,页面引入import QRCode from ‘qrcodejs2’;第三步使用: // 展示二维码 printQcode(x, y) { this.innerVisible = true; // 二维码内容 this.qrcode = y; // 使用$nextTick确保数据渲染 this.$nextTick(() => { this.crat原创 2021-12-10 13:44:30 · 509 阅读 · 0 评论 -
element-ui table 点击某行高亮(修改背景色)
https://www.cnblogs.com/lguow/p/12980781.html原创 2021-12-09 11:32:07 · 702 阅读 · 0 评论 -
解决Element resetFields()重置表单不生效的问题
解决Element resetFields()重置表单不生效的问题原地址:https://segmentfault.com/a/1190000022516459转载 2021-12-07 17:57:25 · 157 阅读 · 0 评论 -
element ui的el-scrollbar进入页面自动更新长度
el-scrollbar是element ui的滚动条,它的底层代码里面有两个方法,一个是unpdate(),一个是handleScroll()。具体可以参考https://blog.csdn.net/weixin_34025051/article/details/92508359它原本是随着页面的长度自适应自己的长度的,现在有一种情况,就是进入页面滚动条的长度没有自动更新,需要人为的手动刷新才可以更新滚动条的高度。是因为页面每次刷新的时候才会重新计算页面的高度,进而更新了滚动条高度。那怎么让页面一进来原创 2021-12-02 08:50:45 · 2421 阅读 · 0 评论 -
this.$refs[‘form‘]解决修改和增加按钮同用一个dialog时,校验规则重复出现
this.$refs[‘form’]是获取ref="form"这个表单里所有数据。如果增加和修改同用一个dialog,当点击修改按钮弹出dialog,出现表单校验。关闭后,点击增加按钮发现校验规则仍然存在,没有初始化。这时候可以使用 add() { this.form = { status: 1, sex: 1 }; this.formTitle = '添加用户'; this.formVisible = true; this.isAdd = true;原创 2021-11-15 10:15:01 · 1873 阅读 · 2 评论 -
slot-scope=“{ row }“的用法
当在<el-table>标签上绑定:data的时候,可以使用 <template slot-scope="scope">来循环scope.row.属性。如果想得到一整行的数据,而不是单独某个属性的,可以使用 <template slot-scope="{ row }">row里面包括一行的所有数据。如果有按钮可以把row传过去进行操作,<el-button type="primary" size="mini" @click="edit(row)">修改<原创 2021-11-12 15:23:34 · 7904 阅读 · 2 评论 -
一个vue组件重复使用,数据不同实现方法
当我们页面上,有好多相同的图表(echarts)或者表格(table)的时候,但是只是表里的数据显示的不同。这时候可以不用每个表都新建一个.vue文件,可以公用一个组件,动态传递不同的数据。下面就实现如何动态传递组件里的数据,从而减少文件新建的冗余。先看图:我们不需要创建5个相同的.vue组件文件,只需要创建一个就行。首先创建index.vue文件,在创建组件worksShopTable.vue组件文件。在index.vue里请求数据,并且返回给组件。(这里用虚拟数据,没有从接口请求)data()原创 2021-10-14 13:52:20 · 8205 阅读 · 0 评论 -
el-table-column动态绑定label属性
el-table-column动态绑定label属性 <el-table-column label="停炉工时"> <el-table-column :label="`${(standardParameter.shutdownTime)}min`"> <template slot-scope="scope"> {{ scope.row.cc_stop_cost }} </template原创 2021-08-16 11:56:46 · 1020 阅读 · 0 评论 -
el-table背景颜色变成透明
总结一次element ui中el-table的背景颜色变成透明的问题刚开始使用了opacity=0.5<el-table style="opacity=0.5;width="100%"></el-table>发现这样写,背景和文字都变成了透明色。导致文字展示模糊。背景也不能完全透明。接下来使用了网上的各种方法:.regional_table /deep/ .el-table, .el-table__expanded-cell { background-col原创 2021-09-28 09:01:57 · 6231 阅读 · 9 评论