![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element
树洞菇凉
这个作者很懒,什么都没留下…
展开
-
elementUi 按钮点击之后取消状态
注:要看看按钮的文字是不是在span标签内,如果button里没有span标签就直接evt.target.blur()Element中的el-button按钮点击之后按钮的状态会一直存在,如果想取消需手动触发;原创 2023-02-01 11:28:15 · 1210 阅读 · 0 评论 -
ElementUI按需引用Message时,启动时会自动弹出空的message弹出框
message比较特殊,不能使用 Vue.use(message)把这行删掉,就不会弹出空的message dialog;按需易用配置如下,一开始模仿其他组件进行装按需引用,原创 2022-11-03 15:20:58 · 445 阅读 · 0 评论 -
vue项目使用Base64加密解密
该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。方法用于创建一个 base-64 编码的字符串,接收一个字符串作为参数。对应的,atob() 方法用于解码使用 base-64 编码的字符串。atob() 方法接收一个通过 btoa() 方法编码的字符串.,不过如果你的页面中有很多地方都有用到加密解密,你也可以在。一般是在处理登录请求的页面引入。(1)在单个页面引入。原创 2022-08-22 20:20:03 · 11306 阅读 · 1 评论 -
vue实现input禁止粘贴
需求: 阻止element组件中的复制粘贴功能实现思路: 组件是由外层和内层的组成的, 根据浏览器的事件传递机制(先捕获,后冒泡): 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可事件修饰符说明:native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了capture: 表明这个方法在捕原创 2022-07-13 10:15:04 · 2480 阅读 · 2 评论 -
vue elementUI 表格span-method属性实现相同数据合并
elementUI 表格span-method属性实现相同数据合并原创 2022-06-06 17:55:48 · 1532 阅读 · 1 评论 -
element 常见问题整理
Table 表格相关1.设置表格el-table表头的颜⾊:header-cell-style 可以修改背景及其他<el-table :data="tableData" :header-cell-style="{background:'#000', color:'#fff'}" >2.设置某⼀列的字段字体颜⾊⽅法1: :cell-style="setCellColor"<el-table :data="tableData" :cell-style="setCell...原创 2022-05-29 18:52:35 · 1025 阅读 · 0 评论 -
vue elementui table组件内容换行
如表格使用render-header内容过多 使用“\n 或 <br/>”换行无效render-header 列标题 Label 区域渲染使用的 Function white-space的值:normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。原创 2022-03-25 15:34:25 · 5364 阅读 · 0 评论 -
Vue element表格实现选中行拖动实现排序
示例效果如下:1):安装sortable.js插件npm install sortablejs2):示例代码<template> <div> <el-table :data="tableDatas" ref="singleTable" highlight-current-row border row-key="id" class="load_table"> <el-table-column prop="id" w..原创 2022-03-15 20:06:22 · 1436 阅读 · 0 评论 -
element 年份区间选择器
效果图:需求如下:1、只存在年份区间选择,不需要月和日期2、初始年份定位到可选年份区间,而不是系统默认时间 <a-form-model-item label="年份" class="ele-input"> <el-date-picker v-model="curStartYear" type="year" :picker-options="startPickerOptions" .原创 2022-03-14 21:56:35 · 7425 阅读 · 1 评论 -
element-ui的el-table怎么自定义合并表头
table自带合并属性:rowSpan和colSpan,所以合并表头获取所有的表头单元格,针对性的对需要合并的单元格进行操作如想要合并的是第二列和第三列,那么我们先获取到所有的表头,然后将第二列表头的colSpsn设为2,将第三列表头的display设为none。data() { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 ..原创 2022-03-04 16:09:10 · 2324 阅读 · 0 评论 -
关于elementUI 时间日期选择器 添加 昨天今天按钮
<el-button @click="getTime(1)">昨天</el-button> <el-date-picker v-model="dateRange" type="datetimerange" align="center" unlink-panels range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholde.原创 2022-02-18 17:55:06 · 1121 阅读 · 0 评论 -
Vue + Element + Table 分页选择勾选 和 取消勾选
<el-table ref="goodOrder" :data="goodOrder" :row-key="getRowKeys" v-loading="loadingGoodOrder" border @row-click="toggleSelection" @selection-change="handleSelectionChange"> <el-table-column type="selection" :reserve-selection="true" fixed h.原创 2022-01-18 09:48:45 · 4742 阅读 · 0 评论 -
Vue+Element UI中 Select下拉框搜索
示例代码如下::remote-method="getSupplierList" 绑定一个方法名,实时传递输入框内参数到方法内<el-select v-model="scope.row.supplierId" placeholder="请选择" filterable remote :remote-method="getSupplierList" @focus="eqNoClick"> <el-option v-fo原创 2021-12-28 09:45:21 · 1426 阅读 · 0 评论 -
vue Element 分页时保存勾选框为选中状态,多选框reserve-selection指定row-key保留数据更新之前的数据,清空保存的数据
reserve-selection仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key)<el-table :data="buyerTable" :row-key="getRowKey" ref="buyerTable" @selection-change="handleSelectionChange" border> <el-table-co.原创 2021-12-24 16:33:06 · 3474 阅读 · 0 评论 -
element-ui table 使用expand展开行
点击按钮控制表格展开隐藏<el-table :data="locationInfoList" ref="locationInfoList" row-key="id" fit stripe class="locationInfoList"> <el-table-column label="编号"> <template slot-scope="scope"> <el-input placeholder="编号" v...原创 2021-12-17 11:44:14 · 2085 阅读 · 0 评论 -
vue+Element UI 实现动态表单(点击按钮增删表格及嵌套输入框的增删)
效果图如下:示例代码如下:<div class="table-wrapper"> <div class="button" style="float:right;margin-bottom:10px;"> <el-button size="small" @click="addTable">新增</el-button> <el-button size="small" @click="delTable"&g.原创 2021-12-08 16:05:57 · 1763 阅读 · 0 评论 -
element-ui中 Cascader级联选择器实现一级二级单选,三级多选
可通过props.multiple = true来开启多选模式;原创 2021-12-08 14:37:26 · 3255 阅读 · 0 评论 -
element-ui Table表格合计列 保留两位小数
// 使用summary-method 自定义的合计逻辑。主要是为了显示订单合计金额,并过滤不需要合计的列 getSummaries(param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { // 第一列 显示文字 小计 if (index === 0) { sums[ind.原创 2021-12-07 14:45:38 · 3104 阅读 · 0 评论 -
vue element 级联选择器,选择内容后动态添加下一项
效果图如下:级联下拉框报错信息:Error in callback for watcher "value": "TypeError: Cannot read property 'level' of null"解决办法:添加key 对级联选择器进行二次封装原创 2021-12-02 09:55:27 · 599 阅读 · 0 评论 -
Error in callback for watcher “value“: “TypeError: Cannot read property ‘level‘ of null“
解决办法:添加key 对级联选择器进行二次封装原创 2021-12-02 09:51:31 · 1747 阅读 · 0 评论 -
vue+element 动态添加一项下拉框
<el-form-item label="请选择:" prop="region"> <div style="display: flex;justify-content: space-between;margin-bottom: 16px;" v-for="(i, index) in model.region" :key="index"> <el-select v-model="i.title" style="width: 150px;"> .原创 2021-12-02 09:25:23 · 1233 阅读 · 0 评论 -
vue elementui中,el-select多选下拉列表中,获取:value和:label的值
<el-form-item label="加工工艺:"> <el-select placeholder="请选择加工工艺" multiple style="width:100%" v-model="queryParams.craftId" size="mini" @change="processingTechnicSelect"> <el-.原创 2021-12-01 20:39:03 · 2869 阅读 · 0 评论 -
ElementUI表格点击行选中复选框
<el-table v-loading="loading" ref="tableOrderList" :data="tableOrderList" @row-click="toggleSelection"></el-table>toggleSelection(row) { this.$refs.tableOrderList.toggleRowSelection(row);},原创 2021-11-24 20:37:22 · 591 阅读 · 0 评论 -
ElementUI中el-dropdown-item 点击事件无效
若直接在el-dropdown-item上添加click事件,点击后没有任何反应。在click后添加native修饰符,则可解决问题。代码如下:<el-dropdown> <span class="user"></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="changePassword">修改密码<...原创 2021-10-15 17:19:19 · 1593 阅读 · 0 评论 -
element input只能输入数字,保留3位小数
方法一、只能输入数字,保留3位小数<el-input v-model="weightTotal" type="number" :min="0" oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value"></el-input>方法二、不足3位小数,自动补0<el-form-ite..原创 2021-10-11 17:18:35 · 2348 阅读 · 0 评论 -
vue+elementui 表格操作列下载,后端返回一个图片地址,前端点击下载,直接下载对应行的图片到本地
方法1:图片同源(访问的网站域名与服务器域名一致)才能下载方法2:图片不同源下载原创 2021-09-27 18:09:57 · 727 阅读 · 0 评论 -
“Error: please transfer a valid prop path to form item!“
错误主要是 el-form-item 设置 prop 的时候出错因el-form-item里面的循环prop名字,需和form列表中的属性名称一致,这样才能确保组件的统一性。<el-form-item label="收款单位" prop="payee"> <el-input v-model="formData.payee" clearable :style="{ width: '100%' }"/></el-form-item>...原创 2021-09-17 16:12:23 · 2488 阅读 · 0 评论 -
vue 下拉框回显bug
下拉框回显只能看到id 而不是对应的文字,下拉框是取字典表的数据将Value的值使用Number包裹起来,如下示例:<el-select v-model=""> <el-option v-for="item in cargoClassOption" :key="item.dictValue" :label="item.dictLabel" :value="Number(item.dictVal原创 2021-09-16 10:44:31 · 416 阅读 · 0 评论 -
vue+elementUI,el-table数据导出Excel和解决导出表格有重复数据
1:安装依赖 xlsx 和 file-savernpm install --save xlsx file-sav2:页面引入import FileSaver from 'file-saver'import XLSX from 'xlsx'3:methods中引入方法注:el-table使用了fixed属性来让某一列固定el-table__fixed-right是固定列(操作列)的类名 exportTable是el-table的id名称exportExcel(){ ..原创 2021-08-28 14:45:25 · 757 阅读 · 2 评论 -
element自定义table表头,修改标题样式、添加tooltip
示例代码如下:<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop原创 2021-08-10 18:19:35 · 1438 阅读 · 0 评论