![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element-ui
lannieZ
这个作者很懒,什么都没留下…
展开
-
el-date-picker 日期时间选择器默认显示时间为近7天
el-date-picker 日期时间选择器默认显示时间为近7天原创 2022-06-06 10:03:30 · 1344 阅读 · 1 评论 -
element ui 时间控件DateTimePicker动态限制时间范围为一个月
<el-date-picker v-model="dateTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" @change="dateTimeChange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </.原创 2022-05-27 11:23:50 · 725 阅读 · 0 评论 -
修改el-menu主菜单和子菜单悬浮的背景色
/deep/.el-menu .el-menu-item:hover{ outline: 0 !important; color: #2E95FB !important; background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;}/deep/.el-menu .el-menu-item.is-active { color: #2E95FB !important; backgro原创 2022-04-07 10:28:38 · 12466 阅读 · 3 评论 -
修改el-table滚动条样式
.el-table{ &::v-deep { .el-table__body-wrapper::-webkit-scrollbar { /*width: 0;宽度为0隐藏*/ width: 2px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 1px; height: 58px; background: rgba(241,原创 2022-04-06 14:06:09 · 3696 阅读 · 0 评论 -
vue基于elementUI的form表单进行二次封装
<template> <div> <el-form class="form" ref="refForm" :model="searchData" :rules="rules" :size="size" :label-width="labelWidth" :hide-required-asterisk="isShowRequired" :width="width"> <el-form-item v-for='item原创 2021-03-24 13:44:21 · 1567 阅读 · 2 评论 -
vue + elementUI模糊搜索的使用
<el-autocomplete class="inline-input" v-model="enterpriseForm.companyName" :fetch-suggestions="querySearch" @focus="groupListMe" placeholder="请填写企业名称" style="width: 400px" @select="handleSelect"></el-autocomplete>.原创 2021-03-10 14:31:49 · 324 阅读 · 0 评论 -
el-tree回显的问题
// 1、直接用:default-checked-keys='checkedKey',将Id push进去,会导致没有全部选中的第二级全部选中list.forEach(item => { this.checkedKey.push(item)})// 2、this.$refs.tree.setCheckedKeys(this.defalutArr);解决方式setCheckedvar that = thissetTimeout(function () {原创 2021-03-04 10:02:32 · 2885 阅读 · 1 评论 -
js el-tree获取到的ids去寻找对应的对象形成普通函数然后转换成递归函数
save() { // 假设arr是从e-tree中选择的ids const arr = [1, 5, 6, 7, 2, 10, 11] var list = [] var list1 = [] var treeList = [] arr.forEach(item => { this.data.forEach(ele => { ele.children.forEach(item2 =>原创 2021-03-03 23:32:15 · 208 阅读 · 1 评论 -
设置el-date-picker不能选当天前一天的日期
<el-form-item label="活动时间:" prop="time"> <el-date-picker v-model="activityForm.time" @change="timeChange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" .原创 2021-01-05 14:18:16 · 794 阅读 · 0 评论 -
el-upload自定义上传方式,取消原本默认本地上传
// uploadDisabled默认false,但点击show_uploadDialog时设置为true,关闭则为false<el-upload :disabled="uploadDisabled" // 当uploadDisabled为true的时候,取消原本默认本地上传 action="/ImageServer/YmUpload_image" list-type="picture-card" :on-preview="handlePictu.原创 2020-12-22 16:14:58 · 2924 阅读 · 0 评论 -
element ui页面刷新或者数据重新加载时复选框保持选中状态
<el-table :data="tableData.list" style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="rowKey"> <el-table-column type="selection" width="55" :reserve-selection="true" /> <el-table-column alig原创 2020-10-14 15:42:53 · 2441 阅读 · 1 评论 -
vue 之 element-ui 实现全选和复选框
<template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column p.转载 2020-10-14 14:47:16 · 1376 阅读 · 0 评论 -
element-ui 计数器的坑
<tr class="td" v-for="(item, index) in tableData" :key="index" style="border-bottom:1px solid red;"> <td> <div class="flex-end mr40" v-if="(item.goodsNum - item.inputNum) == 0.000">已全部入库</div> <div class="f原创 2020-07-24 16:50:38 · 2839 阅读 · 1 评论 -
element-ui单元格内容过长时省略号代替
// :show-overflow-tooltip="true"<el-table-column align="center" prop="goodsName" label="进货商品" width="180" :show-overflow-tooltip="true"></el-table-column>原创 2020-07-21 11:59:35 · 1484 阅读 · 0 评论 -
element-ui上传到限制的图片张数后隐藏上传按钮
<el-upload action="http://192.168.1.33:8888/ImageServer/YmUpload_image" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="loadImg" :class="{hide:hideUpload}" :on-ch原创 2020-07-06 15:34:55 · 2224 阅读 · 0 评论 -
elementUI的table组件设置表头内容文字居中
.el-table td, .el-table th { text-align: center;}原创 2020-06-18 09:22:58 · 2865 阅读 · 0 评论 -
vue项目中el-input的问题
如下图:退款金额是在数组里面渲染出来的当任意一个input框内的值发生改变,最下面红色的总退款金额也需要跟着实时变化当我没加上注释的那句代码的时候,我发现从第二次开始,总退款金额就会等于上一次的和加上这次修改之后的和,原因: 需要将totalPrices拿到for循环外面进行初始化,然后将每次循环的值加到totalPrices上,这样就达到我想要的效果了。inputBlur(item, index) { this.totalPrices = 0 // 注释 this.t原创 2020-06-15 15:47:06 · 3814 阅读 · 0 评论 -
vue在HTML中限制input 输入框只能输入纯数字
// onchange 是在失去焦点的时候监听 // oninput 是在输入的时候就监听<el-input class="input1" size="small" v-model="item.handselMoney" placeholder="请输入数字" onchange = "this.value=this.value.replace(/[^\d]/g,'')"></el-input>...原创 2020-06-12 16:34:13 · 1689 阅读 · 1 评论 -
Element分页遇到的坑
当有搜索功能和分页的情况,遇到了以下问题:第一个问题:当数据渲染完第一次点击第2页或者第三页…输入搜索内容并点击搜索按钮,得到搜索结果之后分页高亮是在上一次点击的页数上,单但数据是显示第一页的,解决方法:// :current-page.sync = "pageNo"searchRequest(e) { this.status = 1 // 判断用户是否点击了搜索按钮会回车键 this.Shop_shopWorkers(1, this.searchWorkers);原创 2020-06-11 10:04:04 · 1497 阅读 · 0 评论 -
Element-UI关于input[type=number]的处理(去掉默认不显示上下箭头样式)
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type='number'] { -moz-appearance: textfield;}原创 2020-06-09 13:49:10 · 1797 阅读 · 0 评论 -
vue element-ui里的input自动聚焦失败的解决方法
<input v-model="payMoney" type="number" v-focus/>directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.querySelector('input').focus() } } },...原创 2020-06-03 16:49:52 · 1998 阅读 · 0 评论 -
Element-ui里的MessageBox的使用
this.$prompt("请输入数量", "修改商品数量", { confirmButtonText: "确定", cancelButtonText: "取消", inputPattern: this.inputPattern, inputErrorMessage: "请输入正确的数量", inputValue: item.goodsNum // 设置初始值 }).then(({ value }) =>原创 2020-06-03 15:14:21 · 2610 阅读 · 0 评论 -
vue项目 根据后台返回的数据动态渲染el-tabs
<el-tabs v-model="editableTabsValue" type="card" @tab-click="show_upsPage" class="sub"> <el-tab-pane :key="item.name" v-for="item in tabsList" :label="item.categoryName" :id="item.goodsCategoryId" :name="item.otherN原创 2020-06-03 11:24:56 · 3244 阅读 · 0 评论 -
对element-ui里的某个单元格做处理
今天遇到一个对element-ui的表格里的某一单元格进行删除我们的单元格里的有多张图片我需要拿到使用者想要删除的图片地址进行删除最后利用table的cell-click实现代码附上// el-table上面写点击事件<el-table @cell-click="onClick_delete"></el-table> // 删除table某一单元格的内容...原创 2019-12-11 15:59:14 · 637 阅读 · 0 评论 -
使用element-ui里的下拉框select做的三级联动遇到的问题
第一次进行选择的时候是没有问题的当第一个下拉框发生改变的时候,没给后面两个框绑定的值清空就会产生问题所以最后在第一个下拉框发生变化的时候清空另外两个框绑定的值<el-form-item label="产品类" prop="productClassId"> <template> ...原创 2019-12-10 13:18:04 · 2225 阅读 · 8 评论 -
侧边导航栏
<template> <div class="aside"> <slot name="goods-aside"> <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened rout...原创 2019-12-06 09:18:37 · 287 阅读 · 0 评论 -
element-ui的table跨度自适应
element-ui的table跨度自适应只需要把宽度设置成百分比就行(每个都要设置哦)<el-table-column prop="date" label="日期" min-width="15%"> </el-table-column>...原创 2019-12-04 23:49:52 · 315 阅读 · 0 评论 -
element-ui 里upload的使用
uploadURL是上传图片的接口地址<el-upload ref="upload" class="upload-demo" :action="uploadURL" :on-preview="handlePictureCardPreview1" list-type="picture-card" name="fileName" ...原创 2019-11-11 17:32:56 · 474 阅读 · 0 评论 -
vue对element-ui里的table表格某一行进行特殊处理
<el-table-column label="订单状态" width="240" prop="orderStatus"> <template slot-scope="scope"> <el-tag v-if="scope.row.orderStatus == 1">待付款</el-tag> <el...原创 2019-11-11 17:16:58 · 2505 阅读 · 0 评论 -
element-ui里的table运用
data是数据获取源prop是根据后端返回数据给你提供的名字lable属性来定义表格的列名<el-table :data="userList" border stripe> <el-table-column type="index" label="序号"></el-table-column> <el-table-col...原创 2019-10-22 11:08:58 · 175 阅读 · 0 评论