element UI
element UI知识
小仙女de成长
啊麻利麻利哄
展开
-
lement的input密码框小眼睛(点击眼睛显示密码,再次点击图标隐藏密码)
一、知识点:带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。因为图标涉及点击事件,带 icon 的输入框,采用的是 slot 方式。slot=“suffix” 表示,图标会出现在input 的尾部;转载 2023-03-09 16:54:34 · 1135 阅读 · 0 评论 -
Element-ui 的el-table固定列显示问题
使用el-tabe设置固定列,且没有为表格设置固定高后,数据过多时会出现如下情况:即左侧固定列、右侧固定列高度均显示不全。原因设置固定列后,实际上该列不再属于表格,而是在表格旁边添加了两个div:左侧是左边固定列,中间是表格,右边是右边固定列。固定列高度是根据父div百分比计算而来。当表格数据过多时,中间div高度会被撑大,从而撑大了父div高度。而此时子div1和子div2高度却没有发生变化。因此就出现了第一张图里的那种情况。解决办法检查你的纵向滚.转载 2022-04-02 18:32:12 · 4629 阅读 · 0 评论 -
element的table组件,表头合并(合并表头单元格)
在el-table-column里面写两个el-table-column,然后用header-cell-style将子表头隐藏<el-table :data="tableData" :span-method="objectSpanMethod" header-row-class-name="analyse-header" border style="width: 100%" :header-cell-style="handerMethod"> <e...转载 2021-11-30 15:26:42 · 3382 阅读 · 0 评论 -
element中upload组件中的确认删除问题
element中upload组件中的确认删除问题问题原因<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</转载 2021-11-04 21:29:11 · 2173 阅读 · 1 评论 -
element-ui table 点击获取当前行索引
在el-table上添加:row-class-name和@row-click<el-table :row-class-name="tableRowClassName" @row-click = "onRowClick">js方法:tableRowClassName ({row, rowIndex}) { //把每一行的索引放进row row.index = rowIndex;},onRowClick (row, event, column) { //点击转载 2021-11-02 17:19:57 · 876 阅读 · 0 评论 -
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
问题:Element-ui中,表格(Table)的 toggleRowSelection 方法无法默认选中的情况。需求:对将设置为选中的内容进行部分修改,如:默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中。<template> <div class="wrap"> <el-table border ref="multipleTable" :data="tableData" tooltip转载 2021-11-01 12:02:45 · 16151 阅读 · 2 评论 -
element-ui table 每行 都有一个上传功能, 只能上传一次 问题解决, 以及 如何 在beforeupload 之前 添加 参数
主要是因为 每一行 都有一个上传,所以需要 设置不一样的 ref 用来 清空 上传 的 缓存文件不论上传成功还是失败 清空 当前行的 文件内容this.$refs['upload'+this.rowsIndex].clearFiles()<el-upload :key="scope.$index" :ref="'upload'+ scope.$index" action="" accep...转载 2021-10-27 14:36:45 · 2454 阅读 · 0 评论 -
【学习总结】element-ui的@selection-change
<template> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> <.转载 2021-10-27 11:52:45 · 1320 阅读 · 0 评论 -
el-checkbox选中保存值为1 没有选中就是0
<el-checkbox v-model="item.checkList[2]" :checked="item.checkList[2]==1? true:false" true-label="1" false-label="0" @change="e => changeCheckboxone(e, item)"> 其他 </el-checkbox>原创 2021-09-18 11:16:22 · 3446 阅读 · 2 评论 -
el-upload限制只能上传一个文件
:on-exceed="handleExceedVisio"handleExceedVisio(){ this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传!`) },原创 2021-09-18 09:22:16 · 1582 阅读 · 0 评论 -
el-checkbox以字符串的形式传给后端(后端要求的)
<template> <div> {{checkList}} <el-checkbox-group v-model="checkList"> <el-checkbox :label="item.name" v-for="(item,index) in checkListArray"></el-checkbox> </el-checkbox-group> <span @click=.原创 2021-09-02 11:06:49 · 1507 阅读 · 0 评论 -
element el-radio单选框去掉label值
el-radio添加了label才可以实现单选功能,但是页面会显示label的值,只需要el-radio标签中添加这样代码即可<el-radio>{{""}}</el-radio>转载 2021-08-27 08:58:47 · 1692 阅读 · 0 评论 -
element ui 复选框,点击特定值时候,其他不能点击(disabled)
<template> <div class="home"> <p v-for="(item, index) in moniObj" :keys="index"> <span class="fl-left font-size mar-l10 mar-top-10" >{{ item.WiringTypeName }}:</span > <el-col :span="24">.原创 2021-08-19 11:54:07 · 693 阅读 · 0 评论 -
element ui 复选框选中某个特定的值时候,其余不能点击
<p v-for="(item,index) in moniObj['Situation01']" :keys="index"> <span class="fl-left font-size mar-l10 mar-top-10">{{ item.WiringTypeName }}:</span> <el-col :span="24"> &...原创 2021-08-19 10:39:07 · 781 阅读 · 0 评论 -
Elemennt文件上传el-upload设置上传文件图片格式限制
beforeAvatarUploadPdf (file) { var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = testmsg === 'jpg' const extension2 = testmsg === 'png' const extension4 = testmsg === 'jpeg' if (!ex.原创 2021-07-14 11:52:55 · 413 阅读 · 0 评论 -
el-upload组件去掉删除按钮图标
只需加上:disabled="true"就可以去掉原创 2021-07-05 14:04:41 · 2886 阅读 · 9 评论 -
element ui 多层dialog嵌套
我的情况是,在一个弹框中,点击按钮 再弹出了一个弹框,第二个弹框被蒙层遮住了。转载 2021-06-18 15:39:32 · 963 阅读 · 0 评论 -
elementui 点击根据是单选框还是多选框实现的一个效果
<template> <div class="demo"> <div> <ul> <li v-for="(item, index) in questionList" :key="index" style="margin-top: 20px; padding: 20px; border: 1px solid #666"> <div style="display: flex; align原创 2021-06-17 17:21:51 · 280 阅读 · 0 评论 -
element实现的一个效果
<template> <div class="demo"> <div> <ul> <li v-for="(item, index) in questionList" :key="index" style="margin-top: 20px; padding: 20px; border: 1px solid #666"> <div style="display: flex; align原创 2021-06-17 16:21:41 · 260 阅读 · 0 评论 -
element动态生成单选框,多选框
<template> <div class="demo"> <div> <ul> <li v-for="(item, index) in questionList" :key="index" style="margin-top: 20px; padding: 20px; border: 1px solid #666"> <div style="display: flex; align原创 2021-06-17 11:43:49 · 1463 阅读 · 0 评论 -
element关闭弹框时清空表单内容
需求:关闭弹框时清空表单内容解决方法:使用@close事件,函数可以自定义 eg : resetForm()、closeDialog()<el-dialog :title="addTitle" :visible.sync="addVisible" @close="resetForm('ruleForm')"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">转载 2021-06-08 15:46:26 · 2585 阅读 · 0 评论 -
ELEMENT整删整改
<template> <div class="demo"> <el-table :data="tableData" > <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n.原创 2021-06-04 11:22:01 · 172 阅读 · 0 评论 -
element-UI——el-table添加序号
<el-table-column label="序号" type="index" width="50" align="center"> <template scope="scope"> <span>{{(page - 1) * pageSize + scope.$index + 1}}</span> </template></el-table-.转载 2021-06-02 15:15:04 · 600 阅读 · 0 评论 -
element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug
最近在开发中遇到一个element-ui分页的一个小bug,具体场景如下1、首先点击正常分页来到第二页数据正常展示转载 2021-06-01 15:02:07 · 1774 阅读 · 0 评论 -
element-ui el-table 多列排序
element-ui el-table 多列排序需求:el-table 需要支持多列排序,后端排序。即就是在点击后重新发送请求,点击一列的排序,另一列的排序样式能够保留问题: element table 排序默认是单列排序最终实现效果:思路:header-click 事件 结合 header-cell-class-name 在点击表头的时候排序的列以及是升降序保存到一个数组对象里, 然后通过header-cell-class-name属性设置选中的样式<el-table转载 2021-05-25 14:12:56 · 1332 阅读 · 0 评论 -
解决 “element分页:删除最后一页的所有数据后,currentPage显示正确,但列表内容为空” 的问题
问题描述:当表格有多页数据,并且末尾页只有一条数据时,删除末尾页的数据之后,数据列表为空,但是当前页码显示正确,还是直接上图说明吧。最后一页只有一条数据,删除操作之前如图所示:删除之后的现象,如图删除之后页码定位到第10页是没有问题,但是之前第10页有数据,为什么现在列表数据空了呢?问题排查:排查发现,在执行完删除操作之后请求了新的数据列表,请求参数如下图咦?我怎么传的是11呢?不应该传10吗?so…删除后得想办法及时更新掉page的值,再去请求列表数据解决办法转载 2021-05-21 11:58:31 · 709 阅读 · 0 评论 -
vue elementUI el-table 表格双击可编辑
<template>//表格也可以写成原生的table<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit"> <el-table-column property="order1" label="顺序"></el-table-column> <el-table-column property="order2.转载 2021-05-13 17:04:32 · 976 阅读 · 0 评论 -
elementui——表格的相同内容单元格合拼(合并)
如何实现相同内容的单元格合并?:span-method="objectSpanMethod"定义一个空数组:[]定义一个变量:0遍历数据如果有相同数据 在空数组添加一个0(相同数据的起始位加1),不相同在数据push 一个1(变量改成当前索引)<html><el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 10转载 2021-05-13 15:44:07 · 593 阅读 · 0 评论 -
element-ui 解决 el-select 设置默认值后无法切换选项
原因:select已经绑定了值,render函数没有自动更新,数据刷新了但是视图没有刷新解决方法:使用this.$forceUpdate()重新render<el-select v-model="ruleForm.region" placeholder="请选择角色" @change="handleSelectChange"> <el-option v-for="item in roleOption" :key="item.id"转载 2021-04-27 14:51:49 · 760 阅读 · 0 评论 -
el-select 输入下拉搜索,匹配不到数据时也保留输入值,同时input获取焦点时保留其value值(el-select支持手动输入搜索)
需要注意的地方1.为了在匹配不到数据时也保留其输入的值,可以用 filter-method 自定义筛选2. el-select添加上filterable之后,点击展开,点击收起,会导致focus和blur事件不触发,但点击页面其他地方才可正常触发 ,可利用visible-change 事件来解决些问题3.input获取焦点时保留其value值用focus事件做相关赋值处理具体实现代码如下<template> <el-select id="selectInput..转载 2021-04-26 16:16:15 · 7554 阅读 · 6 评论 -
elementUI实现分页
分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理。在数据量多的情况下,加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据一、在elementUI中将表格、分页引入自己的页面中 <template转载 2021-04-16 16:28:44 · 2014 阅读 · 0 评论 -
ElementUI中switch开关的使用--关于如何将文字显示在按钮上的实现
具体实现步骤:(1)添加html代码的显示,此处写了class="switch"类名,是为了避免造成全局样式的污染。 <el-table-column label="上下架" align="center"> <template slot-scope="scope"> <el-switch class="switch" v-model="scope.row.status" ..转载 2021-04-15 09:20:40 · 1134 阅读 · 0 评论 -
解决element-ui中,在表单中修改数据,表格的数据也跟着修改的问题
问题:在表单中修改数据,经常遇到表格的数据也跟着修改的问题,并且不管是不是按确定或取消按钮,表格的数据还是被修改了。 -部分代码如下:editRow(row: any): void { this.currentInfo = row; this.dialogVisible = true; this.title = '更新信息'; }-问题原因:this.currentInfo = row;这段代码中,row是Object对象类型,如果直接赋值的话,就变成了.转载 2021-03-24 14:07:46 · 952 阅读 · 2 评论 -
vue element upload 上传多个文件
element-ui upload组件多文件上传之前有一篇写的如何同时传递form表单及upload组件文件,如果有多个upload文件该如何传递呢上代码html按 Ctrl+C 复制代码<el-form ref="newform" :model="newform" :rules="rules"> <el-form-item prop="expName" label=""> <el-input v-model="newfo.转载 2021-03-15 11:55:35 · 449 阅读 · 0 评论 -
vue中el-table每一行根据某个属性,做判断,定义改行的样式
给el-table添加 :row-class-name="tableRowClassName"方法:tableRowClassName( { row, rowIndex }){ if (row.isDelay == "Y") { return 'success-row'; .转载 2021-03-15 11:32:03 · 1937 阅读 · 0 评论 -
三维数组
<template> <div> <div v-for="(item,index) of list2" :key="index"> <div>{{ item.ContentText }}</div> <div v-for="it in item.Items" :key="it.Id"> <div>{{ it.ItemText }}</div> .原创 2021-03-12 15:12:04 · 249 阅读 · 0 评论 -
整删整改vue
<template> <div> <p>radioArray:{{form.radioArray}}</p> <div v-for="(item,index) of list2" :key="index"> <el-radio-group v-model="form.radioArray[index].checked"> <el-radio v-for="it of ite.原创 2021-03-11 12:41:46 · 157 阅读 · 0 评论 -
element 整删
<template> <div> <p>radioArray:{{form.radioArray}}</p> <div v-for="(item,index) of list2" :key="index"> <el-radio-group v-model="form.radioArray[index]"> <el-radio v-for="it of item.list" .原创 2021-03-11 10:19:43 · 148 阅读 · 0 评论 -
element-ui upload组件 上传文件类型限制
<el-upload class="c-upload" ref="upload" :action="actions" :headers="myHeaders" :data="myData" :limit='limit' accept=".xls,.xlsx" :on-exceed="onExceed" :on-change="onChange" :on-success="onSuccess" :on-error=.转载 2021-02-24 16:33:21 · 1091 阅读 · 0 评论 -
element-ui 实现table整列的拖动
演示地址1. 先动态渲染表头,给每一个表头添加一个class=virtual 的画虚线的类名,同时给每个表头加上鼠标点击、拖动、抬起事件:mousedown->mousemove->mouseup.2. 点击时确定点击的哪个,拖动的时候确定拖动的方向,抬起的时候确定放在的位置。3. 改变数据实现拖动完成效果<html lang="en"><head> <meta charset="UTF-8"> <meta name=转载 2021-02-20 14:26:40 · 952 阅读 · 0 评论