吴小花的博客
学如逆水行舟,不进则退。
展开
-
el-table 合并相同行(二维数组)|【elementUI中el-table中span-method 中传递自定义参数】
【代码】el-table 合并相同行(二维数组)|【elementUI中el-table中span-method 中传递自定义参数】原创 2023-02-20 16:23:04 · 971 阅读 · 1 评论 -
element-ui的input框实现远程搜索,模糊搜索
1.html <el-form-item label="位置:"> <el-autocomplete class="search-input" v-model="queryData.location" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="...原创 2021-10-28 16:59:48 · 1842 阅读 · 0 评论 -
vue-element 使用插件clipboard实现复制功能
1.安装clipboard插件 ------------ npm installclipboard2.引入:import Clipboard from "clipboard";3.页面使用 <div class="content"> <div class="item" v-for="(item, key) in linkLi...原创 2021-10-28 16:47:46 · 2856 阅读 · 0 评论 -
Element-ul的 el-image-viewer组件实现点击【查看图片】能预览大图功能
element-ul有大图预览功能,链接如下Element - The world's most popular Vue UI framework但我们不想展示图片,想实现的是“查看图片”能预览大图(多张也可以预览)的功能。如下图所示:该如何实现呢?1.导入组件// 导入组件import ElImageViewer from "element-ui/packages/image/src/image-viewer";2.注册组件 components:...原创 2021-09-14 17:30:47 · 6081 阅读 · 4 评论 -
element -ul 日期选择器(日期格式化,默认值)
需求:实现如下效果1.默认展示最近三个月,2.不能选择今天之后的日期,即不能选未来的时间3.带快捷选项,并且快捷选项的【全部时间】开始时间为某个指定的时间如(2010年8月1日)element-ul 可以很容易实现第二,第三条需求。但是默认数据那个,要自己写。还有选全部时间,从指定日期开始,也废了我一番功夫研究。所以,最终将研究成果整理出来。方便下次遇到同样的问题能快速解决,提升个人的开发效率。也方便其他小伙伴有同样困惑,可以快速寻得解决方案。解决过程及代码解析涉及2个文件(原创 2021-04-28 16:23:02 · 4966 阅读 · 0 评论 -
Vue+elementUl (今天之前的日期不可选,结束日期大于开始日期)
<el-form-item> <el-col :span="4"> <el-radio label="2">定时开启</el-radio> </el-col> <el-col :span="20" v-if="form.open_type == '2'"> ...原创 2021-03-29 16:41:28 · 2000 阅读 · 0 评论 -
Vue+elementUI 动态展示列表的数据
需求描述:活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。后台返回的数据结构如下html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName" :visible.sync="viewDataPopUp" > <div class="export"> <el-button原创 2021-03-09 13:46:36 · 5483 阅读 · 0 评论 -
vue中使用el-dropdown
点击【更多】弹出如下选项使用el-dropdown <el-dropdown @command=" (command) => { handleCommand(command, scope.$index, scope.row); } " > <el-link type="pri..原创 2021-03-09 11:33:24 · 15715 阅读 · 0 评论 -
vue+elementUl导入文件(判断文件格式)
html <el-dropdown style="margin-left: 10px"> <el-button type="primary"> 导入教师 <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-m...原创 2020-12-15 16:57:36 · 2486 阅读 · 2 评论 -
Vue+elementUl表单正则验证(验证手机号,邮箱,密码)
效果:需求: 给form表单增加,手机号,邮箱,密码验证规则代码实现:Form 组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将 Form-Item 的prop属性设置为需校验的字段名即可。 <!-- 弹出的编辑框 --> <el-dialog :title="editingStatus === 'editing' ? '编辑高校信息' : '新增高校信息'" width="700px...原创 2020-12-15 16:29:43 · 2890 阅读 · 1 评论 -
Vue项目使用splitpanes插件(垂直水平分割窗口)
需求:实现可调节的窗口面板。先安装splitpanes插件npm i splitpanes //For Vue 2.x.npm i splitpanes@next //For Vue 3.// In your Vue component.import { Splitpanes, Pane } from 'splitpanes'import 'splitpanes/dist/splitpanes.css'export default { components.原创 2020-12-01 16:24:13 · 11338 阅读 · 0 评论 -
vue+elementUl实现登录记住密码功能
效果思路:采用cookie保存账户和密码。如果勾选了记住密码,将用户名和密码保存在cookie中,设置cookie中数据保存的时间,过期清除cookie保存的值,每次新登录的时候,获取本地保存的cookie值。代码解析:<el-input>标签加show-password可以控制密码的显示和隐藏<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>通过.原创 2020-11-27 15:52:21 · 3842 阅读 · 0 评论 -
vue +elementUl实现展开和收起功能
需求:由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保留1行,点击【展开搜索】按钮的时候才显示全部,点击【收起搜索】按钮又收起部分,保留1行。需求分析:由于不太好控制行数,因为不同屏幕尺寸展示的1行的内容并不相同(不考虑移动端),所以考虑用显示高度来控制。解决思路:所以这里通过控制搜索区域的高度来实现展开和收起搜索功能。页面一进来是收起搜索状态,控制搜索区域的高度为120px,超出部分隐藏。点击展开搜索的时候,调整搜索区域的高度为”auto"定....原创 2020-11-24 14:51:33 · 17391 阅读 · 10 评论 -
elementUl的el-checkbox和el-select用法
效果: 需求: 所有APP用户和指定分组用户可同时选。 分组用户可以多选。难点: 当选择了分组后,自动勾选指定分组用户,删除了分组后,指定分组用户取消勾选。遇到的问题: 一开始,我把el-select组件放在了el-checkbox里面,删除多选的分组后,总会影响el-checkbox的勾选,很难实现想要的效果。解决方案: el-select放到el-checkbox外,慢慢实现了想要的效果。...原创 2020-11-24 14:06:44 · 3053 阅读 · 0 评论 -
Vue全局指令防止按钮重复点击
1.common.js首先引入Vueimport Vue from 'vue';const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout原创 2020-11-13 09:50:25 · 1792 阅读 · 0 评论 -
解决Vue数据更新视图不更新的问题 | element-ui 点击显示/隐藏表格中某行的手机号
业务场景:需要给手机隐藏,点击显示手机号的时候才能看到手机号。解决思路:前端控制手机号的显示,(已经通过调接口获取到了用户的手机号信息)在tableData给每行数据新增加一个isShow的值,当isShow为true时,显示具体的手机号,默认为false.遇到的问题:开发过程中遇到给isShow的值改变,但是页面不刷新的问题。解决方案:1.使用this.$nextTick() 和this.$forceUpdate();强制刷新页面//显示手机号handleShow原创 2020-10-26 17:23:01 · 2904 阅读 · 2 评论 -
Vue+elementUl导出日期+名称形式的表格(例如:20201023着陆页管理.xlsx)
1.先安装依赖npm install --save xlsx file-saver2.在需要的页面引入import FileSaver from "file-saver";import XLSX from "xlsx";3.vue页面父组件.table要导出的是哪一个表格<template> <!-- 导出按钮组件 --> <oftenButton @onExportExcel="onExportExcel"原创 2020-10-23 11:27:23 · 1019 阅读 · 0 评论 -
使用ELement-UI 自定义表格的总计 | 日期选择器皿今天之前的不可用
<el-table :data="tableData6" border height="200" :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px"> <el-table-column pro...原创 2020-04-17 14:31:46 · 674 阅读 · 0 评论