DcTbnk的博客

原创 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 {

原创 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

原创 移动端适配问题：rem / px2rem+scss

→ 查看 【移动端适配文题】 → 查看【px2rem 的原理】

原创 接口返回带标签的字符串文字，前端展示：此时出现的问题是文字不正确换行展示即【接口返回文本 html保持原有格式输出文本且自动换行】

.replace(/\s/gm,' ') const echarts2Title = document.getElementById("echarts2Title"); // console.log('echarts1Title',echarts1Title) echarts2Title.innerHTML=(this.echartsData.absoluteRisk.resultContent).replace(/\s/gm,' ')

原创 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

原创 el-form-item 校验--指定单个表单的校验+指定单个校验的清除

去除form表单默认校验的这两个值 this.$nextTick( ()=> { this.$refs['form'].clearValidate(['firstParty']); this.$refs['form'].clearValidate(['secondParty']); })resetFields() 和 .clearValidate() 区别this.$refs.form.resetFields(); //移除校验结果并重置字段值this.$ref.

转载 vuex监听

原博

转载 js---数组去除空字符串

原链接Boolean链接

原创 前端nginx解决跨域问题

详细的可百度娘nginx文件夹

原创 css---滚动条隐藏

.el-scrollbar{ .el-scrollbar__bar.is-vertical { opacity: 1;//改为0不显示滚动条 width:5; } }原链接

原创 解决--el-table固定操作列时 数据错位问题

【有必要去看看】参考链接—>this.$nextTick( ()=> { this.$refs.tableRef.bodyWrapper.scrollTop = 5 })//在请求数据的时候使用，相当于手动滑动了一下表格发生错位的原因，是由于table在数据请求后，渲染异常的问题；因此，解决办法就是让table重新布局。找到请求数据的地方，立刻获取更新后的DOM...

原创 table-----el-table-column----自定义操作列：slot、component【或者是说table的一些封装用法】

参考文章：element-ui中的 table 组件在vue中的使用呜呜呜幸亏有这篇文章 大佬啊！！！！

原创 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])

原创 MessageBox弹框--【alert、confirm 和 prompt】

MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt…

原创 加密函数、解密函数

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)

原创 vue props 的几种写法【Boolean、String、Array、Object、Number】

// 方法1props: { drawer: { type: Boolean, default: false }, modelTitle: { type: String }, ruleFormMiserable: { type: Object, default: () => { return {} } }, data: { type: Array

原创 el-form：一行el-form-item内多个输入框的校验---【一个表单校验内的多个校验写法】

一行el-form-item内多个输入框的校验1.效果图参考别人的代码element ui自定义表单校验（一行多个输入框必填及大于等于1的正整数表单校验）1.效果图

原创 一个建档的网站搭建流程

原创 关于移动端：上下固定，中间滚动的容器写法（顶部100px是header 底部100px是footer 中间区域要求自适应）--【height: calc(100vh - 200px)】

比如顶部100px是header 底部100px是footer 中间区域要求自适应overflow:overlay和overflow auto作用类似 但是不占空间如果用auto的话 滚动条会占用一部分的宽度

原创 解决一个项目嵌套另一个项目--iframe时遇到的问题：下拉框选择切换时，iframe对应的页面内容并没有相应改变

这里写目录标题1.图片样式2.对应代码图片代码1.图片样式2.对应代码图片其他的对应的监听事件等就不写了，只写关于iframe的还是没弄懂为什么及时改变src的地址，iframe页面内容也不变，最后只好用原生js来解决了因为上面的横向导航什么的都是home.vue页面的内容，而iframe是另一个页面的内容，点击那个页面的表格列操作中的【录入】会进入的iframe的及上图2，然后点击三级横向菜单，可进行iframe的内容切换下拉框切换的展示代码—监听中进行点击录入按钮–进入iframe

原创 el-table点击表头- 解决---表头搜索和排序同时触发的bug

目前表头有搜索和排序的时候,（点击表头，同时触发了排序事件）给edc-search组件的对应表头的div标签添加一个点击事件，并且将点击事件传过来的值的键名cancelBubble设置为true，因为冒泡式的确发事件方式，所以cancelBubble的作用是： false ,支持冒泡确发上级元素的事件，True：阻断这种确发，只确发当前点击元素的事件承接上篇文章 → el-table表头搜索–表格内进行子组件调用的形式进行表头搜索-（表头搜索–区间搜索，输入框搜索，日期时间区间搜索，下拉选择多选搜索

原创 el-cascader 级联（数组嵌套）----根据最内层符合条件的某个值来取值（获得最内层的某个值、获得符合条件的最内层级的所有父层级及本身的某个值组成的数组）

XLlist () { let para = { xmdjTestoid: this.xmdjTestFK, plusSubtaskoid:localStorage.getItem('plusSubtaskoid') }; this.value=[] getDropXmmlTree(para).then((res) => { if (res.errormsg === "成功") { ...

原创 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

原创 el-table表头搜索--表格内进行子组件调用的形式进行表头搜索-（表头搜索--区间搜索，输入框搜索，日期时间区间搜索，下拉选择多选搜索）（前面一篇文章写表格里直接进行某一列的搜索）

表头搜索父组件调用附上整个表头搜索的子组件的代码父组件调用 data () { return { headerData: [ { label: '机构编号', prop: 'orgCode', seach: true, seachSetting: { type: 'Input', value: '' }

原创 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.

原创 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处切换按钮同行添加其他的内容...

原创 el-checkbox报错Error in render: “TypeError: Cannot read property ‘length‘ of undefined“

查看文章1查看文章2综合上面两篇文章，可以得出 ，弹窗按钮关闭后报错的原因是在关闭的时候 ，直接给addForm赋值为{}，导致找不到addForm.sopmbList的存在，从而报错，影响页面的数据展示

原创 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嵌套使用表单校验<!--添加-->

原创 强制修改样式：＞＞＞ 、 /deep/ 、 ::v-deep

→点击按钮可查看原博

原创 关于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

原创 不同于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

原创 vue 移动端---语音播放--原生audio（类似百度翻译的语音播放）

原生audio---语音播放*可下载进行测试的音频网站1.效果图2.一些audio相关的代码知识上图效果代码展示--vue项目*可下载进行测试的音频网站→点击可查看—可下载的音频网站1.效果图上图效果的代码请查看博文→点击可查看（写成了父子组件形式）我目前写的主要展示的是单个语音的播放，如下图所示，我参考的文章地址是 → 点击可查看多个语音的播放顺序问题，可查看文章→点击可查看2.一些audio相关的代码知识// 重新加载this.audio.load(); // 判断是否正在播放

原创 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

原创 全局调用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：含有异步操作

原创 全局调用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

原创 引入文件方式：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

原创 全局注册：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 '@

原创 给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> {' '}

原创 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

原创 将当前时刻时间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