vue
`l l l s j 。
`l l l s j 。
展开
-
vue elementui scss切换 主题,用户自定义颜色切换功能开发
vue elementui scss切换 主题,用户自定义颜色切换原创 2022-11-09 17:57:45 · 990 阅读 · 0 评论 -
vue异步加载数据 传递给 子组件,触发mounted方法,子组件修改父组件值
vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件中修改props的,但偶尔有需要在子组件有修改props,这里介绍三种可以修改子组件props的方法。父组件用sync修饰,子组件通过$emit(‘update:参数’,值)函数去修改。在项目中通常可以用改方法关闭弹框。原创 2022-09-15 16:03:22 · 1632 阅读 · 0 评论 -
vue3 hooks 代替 mixins
首先要理解什么是 hooks:vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。下面我们总结一下如何去书写hooks。以 动态获取 div 高度为例子:vue2 动态div 高度 见 之前 文章:https://blog.csdn.net/qq_37167049/article/details/110530443?spm=1001.2014.3001.5502vue3 写法如下:首先 创建原创 2022-05-09 18:31:22 · 2624 阅读 · 0 评论 -
elementui DatePicker 默认值,时间范围,传参格式化
效果:功能(以基本涵盖日常开发需求):默认 选中 7天前 ~ 今天日期前台显示格式为 日/月/年, 后台传参格式为 年-月-日当前日期之后 不可选,6个月前日期不可选快捷 选择 7天,一个月,三个月时间比较麻烦的点在于 默认之间到底应该怎么设置?官方给出 api :default-value ,但查阅相关资料好像比较麻烦。之后通过如下方式实现: <el-date-picker v-model="searchForm.time" size=原创 2022-02-18 11:36:19 · 3616 阅读 · 0 评论 -
vue 修改数组属性,页面不重新渲染
有这样一个数组, 要做的是, 点击div 变色,在点击取消,尝试之后发现,当改变isChoose属性,isChoose值改变,但是 页面不会重新渲染。效果如下解决方案如下:思路:既然 深度渲染不行,那就用一个新数组 重新赋值就ok了chooseDashboard(item) { let tmp = []; this.groupDashboardList.forEach(group => { group.children.forEach((chil原创 2021-09-29 14:09:21 · 413 阅读 · 0 评论 -
vue 使用 Animate.css 实现 联系我们 组件开发
首先 要清楚, Animate.css 是一个 css动画库,为我们封装好了动画效果,我们只需要根据需求选择对应的css写入到div上即可: fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', f原创 2021-07-08 14:20:02 · 879 阅读 · 2 评论 -
vue 实现 广告悬浮效果,并防抖性能优化
节流防抖参考link:https://blog.csdn.net/zuorishu/article/details/93630578<template> <img :src="aiUrl" class="ai-img" id="ai-img" /></template><script>export default { data() { return { timer: null, aiUrl: require("原创 2021-02-09 09:23:21 · 912 阅读 · 0 评论 -
vue mixins(vue3 hooks)动态获取div高度
之前转载过一篇文章:https://blog.csdn.net/qq_37167049/article/details/103084927可以动态计算div 高度,但是比较繁琐的痛点是:需要在每个需要计算高度的.vue中 都需要 copy一份,这样就很麻烦那怎么样 能解决这个问题呢?可以 参照vue 官网 使用 mixins来解决:https://cn.vuejs.org/v2/guide/mixins.htmldemo 如下:新建 mixins 文件夹:下 建立 getHeightPX.原创 2020-12-03 14:35:28 · 2578 阅读 · 0 评论 -
vue实现 可展开 且 可多选table 组件封装
基于 网上代码进行优化, 实现 实际开发功能效果如图:在父组件可以拿到 当前点击所有行数组:就可以愉快的 把 id 传给后端了!创建 TreeTable 组件:<template> <el-table ref="multipleTable" :data="formatData" :row-style="showRow" v-bind="$attrs" > <!-- @header-click="chooseall"原创 2020-11-23 22:36:48 · 1008 阅读 · 0 评论 -
vuex mutations改变 触发 页面刷新
如图所示:功能要求 当点击 又上角的 asdaf123 时,页面需要 重新获取api.实现想法:使用vuex,当mutations 改变state状态,在页面监听,则可重新发请求 获取列表在点击 左上角时在header 组件中: if(this.$route.path==='/setting/xxxxx'){ this.$store.commit("noticePageMutation", Math.random(1,100));原创 2020-11-01 18:21:47 · 978 阅读 · 0 评论 -
vue+elementui实现 15天记住密码登录,对密码加密
使用crypto-js加解密npm install crypto-jsimport CryptoJS from “crypto-js”; <el-form-item style="margin-bottom:0;border:0;"> <el-checkbox v-model="checked">Remember Password</el-checkbox> </el-form-item> <el-button原创 2020-10-09 19:30:04 · 876 阅读 · 0 评论 -
vue echarts 点击左侧菜单,宽度无法自适应,且支持 窗口大小改变echarts图自适应
1.引入 element-resize-detector依赖npm i element-resize-detector --save2.新建 chart.resize.js 文件import echarts from 'echarts';import Vue from 'vue';import elementResizeDetectorMaker from "element-resize-detector"export var version = '0.0.1';var compatibl原创 2020-09-01 11:18:45 · 1271 阅读 · 7 评论 -
vue 自定义 echarts 主题
可以在 https://echarts.baidu.com/theme-builder/zh/index.html 自定义echart样式然后导出.vue操作:npm install echarts --savemain.jsimport echarts from 'echarts'// echartsVue.prototype.$echarts = echarts新建一个.js文件 把下载好的 json copy进来:比如 在 assets下 新建echart-theme.jsco原创 2020-08-19 12:58:35 · 270 阅读 · 0 评论 -
vuex-存储信息
有2个页面a,bb页面需要拿到 a页面 通过ajax 获取的lista.vue:ajax 获取之后:this.$store.commit("monitorMutation", this.monitorList);store.jsimport Vuex from "vuex";import Vue from "vue";Vue.use(Vuex);const abc= { state: { monitorList: [], collectionList: [] },原创 2020-07-30 16:39:23 · 198 阅读 · 0 评论 -
async await 异步调用ajax实例
async await 异步调用ajax实例:检测文件数, 当文件数量>x , 则返回错误信息, 异 则 发请求 进行删除操作 //检查文件数,如果超过x,则 禁止用户操作 async checkFileMount(_tableSelection) { this.filemgtLoading = true; let response; var params = { list: _tableSelection }; await check原创 2020-07-19 20:19:15 · 1631 阅读 · 1 评论 -
elementui Steps还可以这么用
如图:想实现steps 跟 form一起使用,进行分类的效果,看官网demo 其实并没有类似,怎么实现呢?可以通过slot插槽实现<el-form ref="infoForm" :model="infoForm" label-width="120px"> <el-steps :active="active" direction="vertical"> <el-step :title="item.label" v-for="(item,index)原创 2020-07-10 18:24:16 · 2239 阅读 · 1 评论 -
代码规范eslint,autopep8,-vscode,pycharm使用
整理完之后,坑就没那么多了,尝试的时候还是挺坑的.而且那些报错莫名其妙(要么就是不生效!!!)…ellint 安装$ npm install //安装npm$ npm install -g eslint //安装eslint$ eslint --init.eslintrc.js配置个人偏好:module.exports = { root: true, parserOptions: { parser: "babel-eslint", sourceType: "modul原创 2020-07-04 20:19:20 · 1153 阅读 · 0 评论 -
elementui tree 懒加载 :load="loadNode" 只触发一次 解决方案
当tree 懒加载获取 信息时,只有在第一次 加载时,触发 :load=“loadNode” ,但是这样明显是不合理的,因为当增删改查,后端数据已经改变,但是咱们的:load=“loadNode” 不会再次触发,导致数据显示问题;<el-tree :props="props" :load="loadNode" lazy @node-click="handleNodeClick">&...原创 2020-03-11 17:33:48 · 10244 阅读 · 5 评论 -
vue 封装 loading 组件
这是页面 loading 封装,不是table loading封装.main.jsimport 'element-ui/lib/theme-chalk/index.css'loading.jsimport { Loading} from 'element-ui';let loadingCount = 0;let loading;const startLoading = ()...原创 2019-11-22 14:58:58 · 655 阅读 · 0 评论 -
Vue 根据 视口高度去调整 div 高度
<template> <div class="content" :style="contentStyleObj"></div></template><script>export default { name: 'App', data () { return { contentStyleObj:...转载 2019-11-15 14:36:26 · 897 阅读 · 1 评论 -
vue i18n国际化
1.安装依赖npm install --save vue-i18n2.新建目录结构如下图:3.单页面应用,把language 存入 localstorage中,切换路由 从 localstorage中取值,如果没有 默认 cn.main.jsimport i18n from './i18n/i18n'new Vue({ el: '#app', router, store...原创 2019-11-13 15:47:15 · 131 阅读 · 0 评论 -
js 前端数据关联
需求:通过2个ajax请求返回2个数组table需要展示 userList的userName,和deviceList的 name。userList:[ { id:1, userName:'lllsj' }, { id:2, userName:'cccy' }]deviceList:[ { id:11, name:'设备1', tempName:'' ...原创 2019-10-29 11:30:36 · 649 阅读 · 0 评论 -
Vue elementui table 可编辑
如图:想实现如下表格编辑样式:图1:table 加载样式(图二点击保存之后样式)图2:table 编辑当前行样式图3:点击+添加 table 新增空行<el-table size="small" v-loading="loading" :height="contentHeight" ref="authgroupTa...原创 2019-10-25 17:18:27 · 280 阅读 · 0 评论 -
Element formDialog 二次封装
formDialog 封装没有那么多心路历程,需要注意的比如:select 获取后端返的数据时候赋值,可能需要注意 axios("").then(res=>{ this.roleList = res.data.data.role_list; this.searchForm.forEach(item => { if (item.props &&a...原创 2019-10-21 11:15:38 · 1336 阅读 · 1 评论 -
Element table 二次封装
table 组件封装心路历程:多选列为一块,index列为一块,中间的后端返回来的数据为一块,操作列为一块.所以说 table 分为这4个部分.1.2部分很简单,多选列,index列 是否展示第3块:后端返回的数据 在table展示这块的逻辑分为2种:(1)单纯的数据展示(2)当前列是否可编辑<template slot-scope="scope"> <tem...原创 2019-10-21 11:02:06 · 320 阅读 · 1 评论 -
vue 使用echart 报错Cannot read property 'getAttribute' of null
Cannot read property ‘getAttribute’ of null报错原因:echart dom 没有渲染完成需要在代码外边加上this.$nextTick(()=> {代码})原创 2019-07-09 18:21:34 · 3810 阅读 · 1 评论 -
elementui table-tree 数据格式转化 如果main_if id相同,把sub_if_number 添加到 子节点下
json格式如下:{ "devices": [ { "id": 1, "name": "device1", "interfaces": [ { "main_if_id": 99, "main...原创 2019-06-28 17:18:32 · 217 阅读 · 0 评论 -
elementUI 在Table中使用Popover弹出删除确认框
Popover组件在table中使用,跟官网的会有些差别,用官方的会出现点击删除 不弹出问题.搜了好久,找到这两种解决方案pClose()方法关闭Popover方法1: <el-popover placement="top" title="确定删除?" width=...转载 2019-06-28 17:10:52 · 10030 阅读 · 7 评论 -
elementUI,localstorage缓存table高亮行
之前localstorage 缓存,明明存进去了,打印出来都没有问题,但是高亮行就是记不住选中状态.摸爬滚打之后得到解决方案在mounted()生命周期中,拿到的hasStorage跟 循环数组拿到的数据 打印出来完全一样,但是 并不好用,可能是dom渲染问题?解决方案:把table data数组遍历, 然后用hasStorage的值去跟item 比.一样的话,传 data[i]!!! ...原创 2019-07-03 14:52:33 · 616 阅读 · 0 评论 -
table-tree 过滤,搜索1级跟二级信息显示
<script> let val = '哈哈1'; let data = [ { name: '你好', description: '描述', id: '1', type: 'type', children: [ ...原创 2019-06-10 22:03:05 · 796 阅读 · 0 评论 -
element ui dialog样式
<el-dialog customClass="customWidth" title="设备" v-model="dialogFormVisibleAdd"></el-dialog> <style>.customWidth{ width:80%;}</style>原创 2019-06-15 15:25:04 · 12431 阅读 · 4 评论 -
elementui 根据IP地址排序
<el-table-column label="管理地址" sortable prop="dev_ip" :sort-method="sortByIP"></el-table-column>sortByIP(obj1, obj2) { if ( obj1.dev_ip !== "" && obj1.dev_ip ...原创 2019-07-04 14:57:58 · 443 阅读 · 0 评论 -
elementUI 改变 input 宽度
.authAlert { .el-form-item { margin-right: 0; .el-input { width: auto; } .el-input__inner, .el-textarea__inner { width: 178px; } }}原创 2019-07-04 15:26:07 · 5327 阅读 · 0 评论 -
Vue 导出Excel文件
1.安装依赖npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-dev2.下载需要的js文件Blob.js和 Export2Excel.js下载链接:https://download.csdn.net/download/liuxiaoxiaosmile/10345153...原创 2019-07-22 14:37:51 · 204 阅读 · 0 评论 -
Vue 导出csv文件
npm install json2csv -simport json2csv from "json2csv";<el-button @click="exporeCSV(tableColumns)">导出CSV文件</el-button> data() { return { tableColumns: [ { ...原创 2019-07-22 15:07:16 · 1488 阅读 · 0 评论 -
elementui tree父节点
element tree 默认是当子节点全选,获取 当前所有子节点+父节点id当需求为:当 选择 其中一个子节点,需要同时获取 父节点 id var roleArr = this.$refs.tree .getHalfCheckedKeys() .concat(this.$refs.tree.getCheckedKeys());把当前点击的子节点+对...原创 2019-08-22 16:13:16 · 1271 阅读 · 0 评论 -
浅谈express 搭建node环境 以及 前后端 交互
1.全局安装express-generatornpm install express-generator -g2.创建express 文件夹express myapp3. 安装依赖npm i4.浏览器运行http://localhost:3000/到此 express 项目 就ok了5.在 app.js 配置 ajax 请求头app.all('*', function (req...原创 2019-08-29 16:59:23 · 259 阅读 · 0 评论 -
elementui 改变主题颜色
新建element-variables.scss文件,我的文件路径如下element-variables.scss 内改变主题格调/* 改变主题色变量 */$--color-primary: #AC44FB;/* 改变 icon 字体路径变量,必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~elem...原创 2019-09-02 10:15:14 · 1091 阅读 · 0 评论 -
vue-elementui引入iconfont
参考链接:下载iconfont:https://blog.csdn.net/sleepwalker_1992/article/details/82818970引用彩色icon:https://blog.csdn.net/weixin_34161083/article/details/88705428当单颜色图标 不需要引入iconfont.js,彩色图标需要引入,且在 main.js 引入...原创 2019-09-02 10:53:14 · 170 阅读 · 0 评论 -
Vue v-for 和v-if不能同时使用解决方案
Vue v-for 和v-if无法同时使用,在二次封装form表单时候,根据需求:有的form-item 需要隐藏如下代码:当 form表单需要v-if 判断显示隐藏,第一个代码块无法支持,第二个代码块可以支持. <el-form :size="size" inline :label-width="labelWidth" ...原创 2019-10-09 11:15:25 · 3460 阅读 · 0 评论