Element-Ui组件
Element-Ui组件库的技术使用
一个橙子呀
悄悄拔尖 惊艳所有人
展开
-
element-ui分页,列表显示全部序号,而不是按照页数排序
这一段代码就是控制序号的 <el-table-column show-overflow-tooltip :render-header="renderHeader" v-for="(item, index) in currentColumn" :key="index" :prop="item.prop" :type="item.type == 'ind.原创 2021-09-22 17:29:08 · 439 阅读 · 0 评论 -
封装el-table表格及组件内如何使用
1.封装el-table组件代码,可直接复制使用<template> <div class="table"> <el-table v-loading="loading" :data="dataSource" ref="mutipleTable" :header-cell-style="{'text-align':'center'}" border @se原创 2021-09-16 10:55:51 · 569 阅读 · 0 评论 -
使用el-calendar组件完成日历
效果图直接贴上这个功能,这个样式所有的代码,有需要可自行拿取,修改<template> <div class="life-record"> <!-- 头部搜索,及添加按钮 --> <div class="header"> <div class="date-picker"> <el-button icon="el-icon-arrow-left" t原创 2021-09-01 10:18:36 · 2081 阅读 · 2 评论 -
el-table表格被选择过就禁用,不可在选择的方法
选择过得数据跟当前id一样的就禁用,不允许在选择 <el-table-column v-if="tableData.length > 0" type="selection" :selectable="(row) => {return !selectedTableData.find((v) => v.id == row.id);}" width="55" />...原创 2021-08-20 11:47:37 · 773 阅读 · 0 评论 -
VUE组件el-table表格动态添加一列数据,新增的数据通过v-model绑定不能实时更新解决方法
在写项目的时候,挂载数量本来没有这一项,是要给后端传的数据必须要有,所以是动态添加上去的看代码:因为数据是循环渲染的,这个数量v-model绑定的根本不能实时更新,所以用以下的方法可以解决这个问题:解决方法:使用 vm.$set 实例方法就可以实时更新v-model绑定的数据了,点击加减数量都是正常的,没使用此实例之前,数量只能加到2就不动了,查找了方法,可以解决,进行记录....原创 2021-08-20 11:10:21 · 2349 阅读 · 0 评论 -
el-input设置类型为number时,中文输入法光标上移问题
element的input框有个bug,就是当他设置类型时number的时候,你用中文输入法输入,点空格确定,他的光标会移动到上面去解决方法:/*** 解决el-input设置类型为number时,中文输入法光标上移问题**/.el-input__inner{ line-height: 1px!important;}...原创 2021-08-19 14:53:05 · 424 阅读 · 0 评论 -
element UI 之table表格表头过长使用点点...显示,并添加鼠标移入悬浮显示
需求:鼠标移入表头:1、样式中添加.el-table .cell { word-break: keep-all !important; white-space: nowrap !important; }2、在需要悬浮显示的表头文字过长处添加:show-overflow-tooltip="true":render-header="renderHeader"3、methods中添加:renderHeader(h, data) { return h("sp原创 2021-08-12 15:04:14 · 1096 阅读 · 0 评论 -
element-ui中隐藏滚动条el-scrollbar及修改滚动条颜色
<el-scrollbar></el-scrollbar>将会出现滚动的内容放到上述标签内就可以了。这里要简单的设置一下,将标签的height设为100%,查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。/deep/.el-scrollbar__wrap { overflow-x: hidden;//将横向滚动条隐藏}/deep/.el-scrollbar__thumb { //可设置滚动条颜.原创 2021-07-20 14:18:15 · 4399 阅读 · 0 评论 -
element-ui中使用el-step步骤条实现忘记密码功能
效果图步骤条的使用比较简单,下面这是element官网的用法,我直接用代码展示如下:html:<template> <div class="page-container"> <div> <div class="title-img-wr"> <img src="../../assets/images/login/title.png" alt=""> </div>原创 2021-07-13 14:20:23 · 2281 阅读 · 2 评论 -
注册页面提交验证-密保问题实现
实现页面需求HTML <div class="register-form"> <el-form ref="regForm" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm" @submit.native.prevent> <el-form-item prop="account" label="用户名:"> <el-原创 2021-07-09 11:47:46 · 925 阅读 · 3 评论 -
vue + elementUi中el-table表格高度自适应
首先html里设置table的高度<el-table ref="recordTable" :data="tableData" border :height="tableHeight"><el-table>data(){ return { tableHeight: 500 //默认初始值 }}根据浏览器高度设置初始高度,并监听浏览器高度变化,改变表格高度,70表示表格距离浏览器的高度mounted(){ this.$nextTick(() =>{原创 2021-07-07 16:14:11 · 1013 阅读 · 0 评论 -
element-ui的分页,添加首页、尾页,跳转按钮
要实现这要一个分页的效果HTML分页代码 <div class="user-pagination"> <el-button type="button" @click="jumpFirstPage" class="my-btn">首页</el-button> <el-pagination ref="pagination" background prev-text="上一页" next-text="下一页" la原创 2021-07-07 14:58:06 · 3616 阅读 · 0 评论 -
element-ui中 修改table表格隔行变色的样式
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td { background-color: #233347; /*隔行变色*/ }另一个色值设置在html上 <el-table :data="tableData" stripe ..原创 2021-07-06 19:48:54 · 2268 阅读 · 0 评论 -
element-ui中 修改分页的样式
默认样式效果图修改未选中背景和字体 /deep/.el-pagination.is-background .el-pager li:not(.disabled) { background-color: #0e1423; // 进行修改未选中背景和字体 color: #8fb1d2; border: 1px solid #4581ae; border-radius: 5px; width: 40px; height: 40原创 2021-07-06 19:45:20 · 3389 阅读 · 0 评论 -
element-ui中 table表格修改背景颜色
/deep/ .el-table, .el-table__expanded-cell { background-color: 你要设置的颜色; background-color: transparent;//这是设置透明背景色 }原创 2021-07-06 19:35:59 · 16506 阅读 · 12 评论 -
element-ui中 table表格改变鼠标悬停时的背景色
//样式穿透 深度作用可以实现 /deep/ .el-table tbody tr:hover>td { background-color: 你要改变的颜色 }原创 2021-07-06 19:33:50 · 1897 阅读 · 0 评论 -
Element-Ui中MessageBox弹框提交内容与确认消息的使用方法
js: mod(row) { this.$prompt("请输入公司名称", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", inputValue: row.company_name, inputPattern: /\S/, inputErrorMessage: "公司名称不能为空" }) .then(({ value..原创 2020-12-16 17:33:08 · 7535 阅读 · 0 评论 -
Element-ui中input输入框远程搜索的使用方法
项目中会使用掉后端的接口来完成远程搜索,看官方文档写的可能有些繁琐,在此记录下,在vue项目中如何使用远程搜索来实现的效果图:HTMl: <el-form-item label="素材名称:"> <el-autocomplete class="width250" size="mini" v-model="name" :fetch-suggestions="querySearchAsync" @select="handleSelect" .原创 2020-12-09 11:36:07 · 5776 阅读 · 2 评论 -
自动计算element-ui的Table表格合计(不需要的项以--显示)
效果图 <el-table :data="tableDatas" style="width: 100%" :height="bodyHeight -410" show-summary :summary-method="getSummaries" ref="table"> </el-table> getSummaries(param) { const { columns, data } =原创 2020-12-08 11:05:57 · 1883 阅读 · 1 评论 -
时间戳转成日期格式(全)
代码: parseInt(new Date().getTime())转化为明天现在的时间戳: parseInt(new Date().getTime() + 3600 * 1000 * 24)原创 2020-04-30 18:53:51 · 34464 阅读 · 3 评论 -
element-ui 表格多选框 按条件禁用部分选项
HTML在 el-table-column type 类型为 selection 组件中,添加 :selectable='方法名'<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange"> <el-table-column type="se原创 2020-10-26 15:42:22 · 2182 阅读 · 0 评论 -
解决Element-ui table合计不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需要做两步,合计即可出现1.在vue的生命周期updated中加上以下代码:this.$nextTick(() => { this.$refs['table'].doLayout();}) 2:在el-table标签上加ref="table"这样就可以显示:...原创 2020-09-16 14:08:14 · 2200 阅读 · 3 评论 -
Element Ui 排序功能结合后端接口实现
Element Ui 中 排序功能如何实现,结合项目做一下总结,此总结根据调后端接口来实现在el-table标签上加上如下图@sort-change="sortChange"方法,然后在想要排序的标签上加上sortable="custom"此方法js代码data中定义: orderBy: '',//排序的方式,是升序还是降序 key: '',//这个是要排序的字段,需要绑定prop的 //最后需要把这两个字段传给后端就可以实现排序methods中 sortChange(column).原创 2020-09-14 16:06:26 · 1610 阅读 · 0 评论 -
element-ui中formatter的使用方法(多项数据判断并渲染)
在vue项目中使用el-table表格组件,后端返回多项英文字段,要通过判断渲染不同状态到表格上,用到formatter方法,代码如下://表格上绑定方法 <el-table-column label="简历来源" prop="resource" width="100" align="cent...原创 2020-04-29 16:38:42 · 5520 阅读 · 0 评论 -
el-table表格组件中插槽scope.row的使用方法
要实现点击查看显示后端返回的字段并以文字渲染到页面上,就要是使用到插槽,下图是要实现的: <el-table-column label="任职要求" width="100" align="center"> <template slot-scope="scope"> <el-popover placement="b...原创 2020-04-29 16:54:32 · 27349 阅读 · 0 评论 -
Element Ui自定义Form表单校验规则
HTML:<el-form ref="form" label-width="120px" :rules="rules" :model="ruleForm" ></el-form> <el-form-item label="身份证号" size="mini" class="part" prop="id_card" > <el-input v-m.原创 2020-06-30 15:58:15 · 3707 阅读 · 0 评论 -
element-ui中el-table表格的表头和表格内容居中显示
header-cell-style设置头部居中;cell-style设置单元格内容居中 <el-table :data="tableData" style="width: 100%;" :height="bodyHeight - 172" :header-cell-style="{'text-align':'c...原创 2020-04-24 09:51:33 · 9632 阅读 · 3 评论 -
Element-Ui中的upload实现拖拽上传掉接口
因为项目需要,需要上传识别发票,掉接口完成,将图片上传服务器,查阅文档最终实现功能,要实现的效果图如下:html:<div class="darkBoxs" v-if="flag1"><div class="main"><div class="top1"> <span>上传发票照片</span> <i class="el-icon-close right" @click="$router.go(-1)"></i&原创 2020-05-27 14:18:12 · 4268 阅读 · 4 评论 -
Element Ui 中的日期选择器,今天以前的时间全部禁用
HTML: <el-form-item prop="plat_entry_date" label="计划入职日期"> <el-date-picker type="date" placeholder="选择日期" class="innputwidth" v-model="plat_entry_date" :picker-options="pickerOptions"原创 2020-05-12 19:10:12 · 1112 阅读 · 0 评论 -
Element-Ui中table表格掉接口完成排序
1:在el-table上加上这个方法@sort-change=“sortChange”2:在想要排序的表头上加上sortable=“custom”3:多看文档。多console.log就有你想要的html: <el-table :data="tableData" size="mini" show-summary @sort-change="sortChange" ref="multipleTables" .原创 2020-06-01 11:53:45 · 1093 阅读 · 0 评论 -
将后端返回的金额数据以“万”为单位显示
效果图: <el-table-column prop="wsk_amount" label="未收款金额" width="180" align="center" sortable="custom" > <template slot-scope="scope"> <span >{{原创 2020-06-01 11:58:48 · 837 阅读 · 0 评论 -
如何点击组件的el-button按钮触发的是原生的input上传文件的方法
有一个上传本地文件的功能,老大觉得原生的上传文件样式不好看,想让我使用组件的el-upload上传文件方法,可是原生input,type="file"代码已经写完了,我就灵机一动,可不可以使用组件的样式来触发原生input上传的方法,果然,一试可以,代码如下: <el-form-item label="附件:" class="floatLeft"> <el-button size="mini" type="prima.原创 2020-06-01 15:37:40 · 5977 阅读 · 3 评论 -
给Table表格数据加合计的方法(针对后端给返回合计数据)
效果图: <el-table :data="tableData" show-summary :summary-method="getSummaries" ref="multipleTables" ></el-table> data() { return { amount: { //后端返回金额的字段名 customer_invoice_money_am原创 2020-06-01 13:56:52 · 2616 阅读 · 0 评论