qq_41287158的博客

el-select 已选项禁止删除 el-select编辑时已选择的项不允许删除

element-ui 输入或搜索数据 el-autocomplete

由于下拉数据比较多，造成卡顿用户体验极差，所以使用滚动加载的办法提高用户体验方案一：（局部自定义一个指令）第一步（创建指令）export default { directives: { loadMore: { bind(el, binding) { // 获取element，定义scroll let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown_

实现效果图：代码如下：<el-form-item label='菜单图标：' prop='icon' > <el-popover placement="bottom" width="450" trigger="click" > <span slot="reference"> <el-input suffix-icon='data-icon' v-model='form.icon' p

前言：在工作中有这样一个需求在el-input中只允许输入数字解决办法如下：<el-input oninput="value=value.replace(/^\.+|[^\d.]/g,'')" v-model='search.sort' placeholder='请输入'/>

场景： 产品扔出一个需求说：图片随便用户选择不限制但是必须要按照一定的大小对图片进行剪裁方案：为了快速解决这个问题，并且避免重复造轮子直接就使用了vue-cropper效果图如下：第一步：npm install vue-croppernpm install vue-cropper第二步： 使用（按需引入）<template> <el-dialog title='裁剪Logo' :visible.sync='visible' :show-cl

问题场景：我们在axios中统一处理500、401、404状态码并统一抛出el-message提示，那么就会出现重复提示的问题非常的不友好。如图：解决办法：新建一个resetMessage.js文件,写入以下代码// resetMessage.js// 重置message，防止重复点击重复弹出message弹框import { Message } from 'element-ui'let messageDom = nullconst resetMessage = (options) =

目前发现resetFields()，有以下两种情况可能会导致失效：情况1、el-form-item没有加上prop属性需要重置的表单项el-form-item必须要加上prop属性，并且prop属性的值必须和数据双向绑定的值最后面保持一致element-ui 提供的文档如图：图例如下：情况2、在mounted之前给表单赋值（mounted DOM未挂载完成）在mounted之前赋值会被当成是初始值，而resetFields方法是将值重置为初始值而不是清空。所以导致没有清空数据。解决办法：

问题：当我们对el-table的某一列进行判断显示隐藏时，就会出现列位置和表头样式错乱的问题我们通常的写法（会错乱的写法）<el-table-column label="test" v-if="active !== '2'" > </el-table-column>修正后的写法（不会错乱的写法）<el-table-column label="test" :key="Math.random()" v-if="active !== '2'" > </el-ta

背景：最近在项目中有这样一个场景,当用户点击“导出”时，需要把当前页面的数据分析导出成一张图，并且直接下载到本地。（当前页面包含有echarts图）1、安装依赖包 html2canvasnpm i -S html2canvas2、在需要使用导出的页面导入 html2canvasimport html2canvas from "html2canvas";<div class="export-btn" @click.stop.once ="exportClick">

element-UI文档中本来el-select有个blur事件绑定函数属性。但是使用后发现有时候失焦事件并不能触发生效，也就导致所绑定的函数不能执行。解决办法：利用el-select的@focus方法，在select标签内 添加 ref 于此便可在focus事件内触发 blur事件。 代码如下： <el-select multiple filterable allow-create default-

最近有这样一个需求，一个弹框中有一个tabs切换且tab标签是动态的，每个tab中有一个表格和一个分页。那我们需要怎么做表格内容和分页互不影响呢？（效果如下）接下来就讲讲具体的实现：思路：1. 获取到tabs标签列表 例如：parkingList2. 在parkingList中添加page（分页）、allList（表格内容）3. 用一个currentPark装当前选中的tab <el-tabs v-model="activeName" @tab-click="handClick"&gt

<template> <div id="companySearch"> <el-select v-model="visible" class="elSelectCom" placeholder="请选择" v-el-select-loadmore="loadmore" popper-class="companySearchselect" > <div class="Input

element-ui el-table表格展开行 并且默认展开一行<el-table ref="table" :data="tablesData" style="width: 100%" :header-cell-style="{ background: '#FAFAFA', color: '#000000', borderRight: '1px s

根据需求需要表格多选，并且翻页的时候也需要翻页勾选。直接上代码：先上效果图：图一为第一页,图二为第二页图一：图二： <el-table ref="table" :data="tablesData" style="width: 100%" :header-cell-style="{ background: '#FAFAFA', color: '#000000',

vue + axios + element-ui 实现全局Loading(部分接口不要loading，多个请求合并一个loading)

直接上代码，试了几个办法都没有行通，下面给出搞定的方式：<el-form-item label="登录密码：" prop="password" :rules=" title === '添加员工' ? [ { required: tr

element-ui el-table 鼠标移入滚动条出现 移出表格滚动条隐藏使用el-table的两个事件cell-mouse-leave // 当单元格 hover 退出时会触发该事件cell-mouse-enter // 当单元格 hover 进入时会触发该事件我这里用到了jQuery(不会引入的可以去搜一下)<el-table height='500' :data="userList" style="width: 100%" :header-cell

vue 当多个页面都有同一个请求时 可以利用vuex存储请求的结果第一步：把异步请求写在actions中，而修改state的状态只能在mutations中，所以需要在action中需要把请求回来的结果提交mutations修改state的状态。// mine.js// 引入axiosimport { myRequest } from '../.././router/axios'const mine = { namespaced: true, //开启命名空间 state: {

element el-table 表格渲染数据 后台返回的数据的是状态值 前端需要转换显示文字 快速展示对应的文字比如后端的返回数据state是 0、1、2，分别代表 归档、到期、正常。而我们要在表格中快速的展示出对应的文字。如图所示：直接上代码 <el-table-column label="状态"> <template slot-scope="scope"> {{ dataState[scope.row.state] }} &lt

不要使用el-input的@input事件，使用这个事件，使用防抖无效。上实际代码，如下：<template>// 其他代码省略 <el-input suffix-icon="el-icon-search" v-model="page.searchCode" clearable></el-input></template><script> data() { return { timer: '', p

el-collapse 默认展开 并展示出从后台请求回来的数据 默认展开了但是请求回来的数据并没有渲染遇到一个坑， 在控制台打印数据明明已经回来了，也赋了值，但是页面就是没有渲染，不知道大家有没有遇到这个问题。废话不多说直接放代码。在data中声明 data() { return { activeName:'', } }我们在请求数据拿到之后再给activeName赋值就可以渲染成功了。 async getUtilTenantList() { thi

vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示最近公司项目需求，搜索表格的内容，并且需要搜索的关键字高亮显示（关键字标红），如图所示最终效果：1、在需要搜索的列用 v-html=“showDate(scope.row.house_village_info.hvi_province)” showDate是自定义的方法，如图所示：2、在methods中写，showDate方法（方法名可以自定，调用一直就可以了）方法如下：// this.page.searc

element el-select下拉框修改样式 el-select-dropdown修改下拉框的样式想要修改el-select的样式 尝试修改css无效果，于是打开控制台发现如图所示，它们是同级的。于是，又去仔细翻阅了element文档 发现 有一个popper-class属性实践，如图所示注意：style中需要去掉 scoped！！！ 否则无效...

在el-table中加入 :header-cell-style 属性，即可代码如下<el-table :header-cell-style="{ background: '#FAFAFA', color: '#000000', borderRight: '1px solid #fff' }" ></el-table>> <el-table :header-cell-style="{ background: '#FAFAFA', color: '#000000',