- 博客(462)
- 收藏
- 关注
原创 dg-table+el-table【表格+分页】---css自适应高度+滚动条(拓展calc()函数)
缩放浏览器,表格+分页依旧正常展示,如下图所示:图片中涉及到 左侧的dg-table(封装过的el-table)、右侧的el-table 两种类型的样式设置由于本篇是使用了position定位来处理的,所以先要了解:Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动简单的定位实现过程给想要自适应高度的div设置position:absolute;top:0;left:0;right:0;bottom:0;(具体距离设置看情况设定).abow_dialog {
2021-12-07 15:14:30
1774
原创 px转vw----等比放大、缩小
1、 在package.json页面加入"postcss-import": "^12.0.1", "postcss-px-to-viewport": "^1.1.1", "postcss-url": "^8.0.0",2、 然后 npm install 安装一下3、 然后再在package.json同级处添加一个文件.postcssrs.js// https://github.com/michael-ciniawsky/postcss-load-configmodule.ex
2021-11-22 15:25:48
1354
5
原创 接口返回带标签的字符串文字,前端展示:此时出现的问题是文字不正确换行展示即【接口返回文本 html保持原有格式输出文本且自动换行】
.replace(/\s/gm,' ') const echarts2Title = document.getElementById("echarts2Title"); // console.log('echarts1Title',echarts1Title) echarts2Title.innerHTML=(this.echartsData.absoluteRisk.resultContent).replace(/\s/gm,' ')
2021-10-28 18:05:18
617
原创 el-date-picker 开始日期和结束日期 做两个单独的输入框,日期逻辑限制
目录1.参照并更改后2. 原博1.参照并更改后<el-date-picker type="date" placeholder="开始日期" :picker-options="pickerOptionsStart" v-model="addForm.periodStart" class="box-date-picker"></el-date-picker><el-date-picker type="date" placeholder="结束日期" :picker-op
2021-09-29 11:16:58
2528
原创 el-form-item 校验--指定单个表单的校验+指定单个校验的清除
去除form表单默认校验的这两个值 this.$nextTick( ()=> { this.$refs['form'].clearValidate(['firstParty']); this.$refs['form'].clearValidate(['secondParty']); })resetFields() 和 .clearValidate() 区别this.$refs.form.resetFields(); //移除校验结果并重置字段值this.$ref.
2021-09-29 10:00:49
5041
原创 css---滚动条隐藏
.el-scrollbar{ .el-scrollbar__bar.is-vertical { opacity: 1;//改为0不显示滚动条 width:5; } }原链接
2021-09-18 10:19:56
458
原创 解决--el-table固定操作列时 数据错位问题
【有必要去看看】参考链接—>this.$nextTick( ()=> { this.$refs.tableRef.bodyWrapper.scrollTop = 5 })//在请求数据的时候使用,相当于手动滑动了一下表格发生错位的原因,是由于table在数据请求后,渲染异常的问题;因此,解决办法就是让table重新布局。找到请求数据的地方,立刻获取更新后的DOM...
2021-09-02 16:02:12
1957
1
原创 table-----el-table-column----自定义操作列:slot、component【或者是说table的一些封装用法】
参考文章:element-ui中的 table 组件在vue中的使用呜呜呜幸亏有这篇文章 大佬啊!!!!
2021-08-31 11:32:05
785
原创 el-table默认高亮第一行--【无勾选框】
// 给el-table设置ref=’multipleTableDxy‘_this.$refs.multipleTableDxy.setCurrentRow(_this.$refs.multipleTableDxy.data[0])// 这个是图片上edc-table组件的默认高亮第一行的写法_this.$refs.table2.$refs.multipleTable.setCurrentRow(_this.$refs.table2.$refs.multipleTable.data[0])
2021-08-24 17:42:53
847
原创 MessageBox弹框--【alert、confirm 和 prompt】
MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt…
2021-08-24 09:54:56
518
原创 加密函数、解密函数
tools/jiami.js'use strict'import cryptoJs from 'crypto-js'const keyOne = '313233343536373a'export default { // 加密函數 jiami (word) { // console.log(word) // console.log('秘钥长度为:', keyOne.length) const key = cryptoJs.enc.Hex.parse(keyOne)
2021-08-24 09:37:20
544
原创 vue props 的几种写法【Boolean、String、Array、Object、Number】
// 方法1props: { drawer: { type: Boolean, default: false }, modelTitle: { type: String }, ruleFormMiserable: { type: Object, default: () => { return {} } }, data: { type: Array
2021-08-20 09:59:03
1867
原创 el-form:一行el-form-item内多个输入框的校验---【一个表单校验内的多个校验写法】
一行el-form-item内多个输入框的校验1.效果图参考别人的代码element ui自定义表单校验(一行多个输入框必填及大于等于1的正整数表单校验)1.效果图
2021-08-19 10:43:50
6031
2
原创 关于移动端:上下固定,中间滚动的容器写法(顶部100px是header 底部100px是footer 中间区域要求自适应)--【height: calc(100vh - 200px)】
比如顶部100px是header 底部100px是footer 中间区域要求自适应overflow:overlay和overflow auto作用类似 但是不占空间如果用auto的话 滚动条会占用一部分的宽度
2021-08-12 10:33:28
452
原创 解决一个项目嵌套另一个项目--iframe时遇到的问题:下拉框选择切换时,iframe对应的页面内容并没有相应改变
这里写目录标题1.图片样式2.对应代码图片代码1.图片样式2.对应代码图片其他的对应的监听事件等就不写了,只写关于iframe的还是没弄懂为什么及时改变src的地址,iframe页面内容也不变,最后只好用原生js来解决了因为上面的横向导航什么的都是home.vue页面的内容,而iframe是另一个页面的内容,点击那个页面的表格列操作中的【录入】会进入的iframe的及上图2,然后点击三级横向菜单,可进行iframe的内容切换下拉框切换的展示代码—监听中进行点击录入按钮–进入iframe
2021-08-10 09:58:51
1087
原创 el-table点击表头- 解决---表头搜索和排序同时触发的bug
目前表头有搜索和排序的时候,(点击表头,同时触发了排序事件)给edc-search组件的对应表头的div标签添加一个点击事件,并且将点击事件传过来的值的键名cancelBubble设置为true,因为冒泡式的确发事件方式,所以cancelBubble的作用是: false ,支持冒泡确发上级元素的事件,True:阻断这种确发,只确发当前点击元素的事件承接上篇文章 → el-table表头搜索–表格内进行子组件调用的形式进行表头搜索-(表头搜索–区间搜索,输入框搜索,日期时间区间搜索,下拉选择多选搜索
2021-08-09 19:06:49
1504
1
原创 el-cascader 级联(数组嵌套)----根据最内层符合条件的某个值来取值(获得最内层的某个值、获得符合条件的最内层级的所有父层级及本身的某个值组成的数组)
XLlist () { let para = { xmdjTestoid: this.xmdjTestFK, plusSubtaskoid:localStorage.getItem('plusSubtaskoid') }; this.value=[] getDropXmmlTree(para).then((res) => { if (res.errormsg === "成功") { ...
2021-08-06 21:17:20
498
原创 el-table树结构的搜索---递归遍历
表格树结构搜索效果图标题 点击可查看 ➡ element ui 树形表格过滤查询数据解决( 可直接套用 )效果图标题 <el-table ref="tableData" :data="tableData" :height="tableheight" default-expand-all row-key="sysResourcesId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="w
2021-07-06 15:10:28
1916
原创 el-table表头搜索--表格内进行子组件调用的形式进行表头搜索-(表头搜索--区间搜索,输入框搜索,日期时间区间搜索,下拉选择多选搜索)(前面一篇文章写表格里直接进行某一列的搜索)
表头搜索父组件调用附上整个表头搜索的子组件的代码父组件调用 data () { return { headerData: [ { label: '机构编号', prop: 'orgCode', seach: true, seachSetting: { type: 'Input', value: '' }
2021-07-06 14:55:17
674
原创 el-table表头搜索--写在表格里的单独的某一列进行搜索1(后面一篇文章写表格里进行子组件调用的表头搜索)
单独一列的搜索<el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150"> <!-- --> <template #header v-if="headerItem2.seach"> <el-popover v-if="headerI.
2021-07-06 14:42:03
1269
原创 el-tabs:el-dialog中包含el-tabs时关闭时浏览器卡死问题、在el-tabs处切换按钮所在行添加其他的内容
el-tabs相关问题1.el-dialog中包含el-tabs时关闭时浏览器卡死问题2.在el-tabs处切换按钮所在行添加其他的内容1.el-dialog中包含el-tabs时关闭时浏览器卡死问题el-dialog中包含el-tabs时关闭时浏览器卡死问题在el-dialog怎么使用destroy-on-close2.在el-tabs处切换按钮所在行添加其他的内容在el-tabs处切换按钮同行添加其他的内容...
2021-06-28 11:20:23
747
原创 el-checkbox报错Error in render: “TypeError: Cannot read property ‘length‘ of undefined“
查看文章1查看文章2综合上面两篇文章,可以得出 ,弹窗按钮关闭后报错的原因是在关闭的时候 ,直接给addForm赋值为{},导致找不到addForm.sopmbList的存在,从而报错,影响页面的数据展示
2021-06-24 10:04:25
1084
原创 element-ui的el-table和el-form嵌套使用表单校验的用法及可能出错的情况及解决方法
el-form套el-table并校验element-ui的el-table和el-form嵌套使用表单校验element-ui动态删除表单项后导致表单验证报错"please transfer a valid prop path to form item!"隐藏浏览器控制台输出async-validator验证警告element-ui的el-table和el-form嵌套使用表单校验→ element-ui的el-table和el-form嵌套使用表单校验<!--添加-->
2021-06-22 11:26:54
3590
原创 关于request.js文件针对 接口调用成功--却还出现loading的解决办法
request.js文件的修改1.最终的request.js2.接口引用1.最终的request.jssrc/utils/requestimport axios from 'axios'import Cookies from 'js-cookie'import { Message, Notification, Loading } from 'element-ui'// import store from '@/store'// import { getToken } from '@/util
2021-06-17 10:55:56
813
原创 不同于Notification 通知、Message 消息提示的一种自定义信息提示组件$tip
自定义信息提示组件$tip效果1.组件封装2.全局注册3.使用效果1.组件封装tips/index.jsimport Vue from 'vue'import tips from './tip.vue'const Tips = Vue.extend(tips)const tip = function(options, type) { if (options === undefined || options === null) { options = { content
2021-06-17 10:51:48
819
原创 vue 移动端---语音播放--原生audio(类似百度翻译的语音播放)
原生audio---语音播放*可下载进行测试的音频网站1.效果图2.一些audio相关的代码知识上图效果代码展示--vue项目*可下载进行测试的音频网站→点击可查看—可下载的音频网站1.效果图上图效果的代码请查看博文→点击可查看(写成了父子组件形式)我目前写的主要展示的是单个语音的播放,如下图所示,我参考的文章地址是 → 点击可查看多个语音的播放顺序问题,可查看文章→点击可查看2.一些audio相关的代码知识// 重新加载this.audio.load(); // 判断是否正在播放
2021-06-08 11:15:59
882
2
原创 vuex:dispatch--mutations、commit--actions了解
相同点:mutations和actions都是用来改变Vuex store的状态的;不同点:mutations提供的回调函数是同步的;而actions提供的方法是异步的,此外,actions的方法最终还是通过调用mutations的方法来实现修改vuex的状态的。dispatch:含有异步操作,例如向后台提交数据,写法: this.store.dispatch(′actions方法名′,值)‘commit‘:同步操作,写法:this.store.dispatch('actions方法名',值)`co
2021-05-19 15:21:51
416
原创 全局调用vuex的写法及使用(需传值)-----------登录信息的存储+使用
全局调用vuex的写法及使用下拉框数据`1.user.js``2.将user.js写入getters.js中``3.触发这个vuex生成数据(dispatch触发actions里的方法)``4.使用vuex数据`相同点:mutations和action都是用来改变Vuex store的状态的;不同点:mutations提供的回调函数是同步的;而actions提供的方法是异步的,此外,actions的方法最终还是通过调用mutations的方法来实现修改vuex的状态的。dispatch:含有异步操作
2021-05-19 15:18:02
813
原创 全局调用vuex的写法及使用-----------下拉框数据的存储+使用
全局调用vuex的写法及使用下拉框数据`1.allOptions.js``2.将allOptions.js写入getters.js中``3.触发这个vuex生成数据``4.使用vuex数据`下拉框数据1.allOptions.jsimport api from '@/api/index' // 引入接口文件const state = { options: sessionStorage.getItem('options') != null ? JSON.parse(sessionStorag
2021-05-19 14:51:13
577
原创 引入文件方式:axios写接口
引入文件:axios调用接口1.axios.js文件2.写post、get接口3.调用接口1.axios.js文件import axios from 'axios'import { Loading, Message } from 'element-ui'// 引入Loading服务// 创建 axios 实例const service = axios.create({})// 开始加载动画let loadingfunction startLoading() { loading = L
2021-05-19 14:36:36
334
原创 全局注册:request----------接口的写法(request.js,公用base地址的引入,post/get)
request----------接口的写法1.request.js文件2.公用base地址的引入3.post、get接口1.request.js文件import axios from 'axios'import Cookies from 'js-cookie'import { Message, Notification, Loading } from 'element-ui'// import store from '@/store'// import { getToken } from '@
2021-05-19 14:15:06
1040
1
原创 给el-table表格的某一列增添html(如复选框)
给el-table表格的某一列增添html1.效果2.代码1.效果2.代码在el-table-column标签内添加formatter对应的方法代码如下:methods: { ... // 停用标志 grhkTybzJudge(data) { return data.grhkTybz === true ? ( <input type='checkbox' disabled='true' checked> {' '}
2021-05-19 12:01:24
1041
原创 vue注册全局方法:生成单号------年月日(4+2+2)+随机数n位 (前端生成单号,从接口取单号)
vue注册全局方法:生成单号------年月日(4+2+2)+随机数n位写方法全局注册页面中使用此方法写方法因为再vue中多次用到此方法,故而创建一个公用的文件内含多次被调用的方法/* 公共方法 */// 单号:4位年度+2位月份+4位流水号function orderNo() { // 调用获取当前日期的方法加四位随机数 return getProjectNum() + Math.floor(Math.random() * 10000) // 如果是6位或者8位随机数,相应的 *100
2021-05-19 11:39:15
716
原创 将当前时刻时间new Date()转换为YYYY-mm-dd、YYYY-mm-dd HH:MM:SS字符串形式
使用// vue 页面,不需要引入,直接使用 this.dateTypeFormat('YYYY-mm-dd', new Date())// 默认当天 this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())全局注册此方法写在vue下的main.js文件下Vue.prototype.dateTypeFormat = function(fmt, date) { let ret const opt = { 'Y+': date
2021-05-19 11:30:19
4806
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人