![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js模块
皮皮灬虾
代码“虐”我千万遍,我待代码如初恋!
展开
-
el-table 边框颜色修改 简单有效!
废话不多说,直接上图。原创 2023-10-09 11:45:21 · 1837 阅读 · 0 评论 -
Vue兄弟组件之间相互调用方法
Vue兄弟组件之间相互调用方法原创 2022-09-28 15:49:31 · 3500 阅读 · 4 评论 -
element UI中table操作栏更多按钮展示与折叠的实现
Element UI中table操作栏更多按钮展示与折叠的实现1、然后给大家看下动态图2、解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框废话不多说,直接上代码吧html代码块:<el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selectio原创 2022-04-21 17:28:18 · 12051 阅读 · 4 评论 -
ant desgin vue table动态循环生成表格
场景: 根据选择日期年月份进行动态往表格添加数项话不多说,下面直接上代码一、html代码<!-- 表格 --><div class="admin_table_list"> <a-spin tip="Loading..." :spinning="spinning"> <a-table bordered size="small" :rowkey="id" :comp原创 2021-12-21 14:53:43 · 3389 阅读 · 2 评论 -
Vue项目中如何使用动画特效
一、安装在命令行中执行:使用npm或者cnpm安装npm install animate.css --save 或 cnpm install animate.css --save二、引入在main.js全局引入import animate from 'animate.css'......Vue.use(animate)//记得引入使用三、页面使用在index.vue中<template> <div class="box"> <button @c原创 2021-09-11 17:18:06 · 2751 阅读 · 0 评论 -
Vue 使用element-UI 上传图片及图片回显
问题描述: 将后台接口返回的图片,回显到页面1、html代码<el-form-item label="房间图片:" prop="images"> <el-upload :action="action" list-type="picture-card" :accept="accept" :auto-upload="true" :limit="imgLimit" :multiple="isMultiple" :file-list="form.images" :原创 2021-08-24 14:31:21 · 3856 阅读 · 7 评论 -
VUE跨域问题
问题描述:Vue发送请求的时候存在跨域,不能请求到正确数据,控制台报错如下:Access to XMLHttpRequest at 'http://localhost:8000/equip_fault_report/all' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested re原创 2021-08-13 15:17:30 · 318 阅读 · 0 评论 -
Vue项目H5移动端在线预览PDF文件
1、安装pdfh5插件npm install pdfh5 --save2、使用<template> <div id="app"> <div id="demo"></div> </div></template><script> import Pdfh5 from "pdfh5"; export default { name: 'App', data() { return {原创 2021-07-14 09:43:43 · 1813 阅读 · 11 评论 -
Vue实现打印功能最简单的方法
摘要: 今天做了一个ERP系统打印订单的功能,下面是效果图:查了很多资料,一开始我直接用print.js这个插件,虽然能实现打印功能,但是当你需要打印的表格数据太多了,就无法实现分页打印,为了不浪费大家时间,所以在这里,我建议大家直接使用vue-print-nb这个插件,可以随心所欲的实现打印功能。在这里我就不多说了,用了就知道!下面说下安装和使用方法:1、安装vue-print-nbnpm install vue-print-nb --save2、在main.js文件中引入 import原创 2021-07-09 11:44:57 · 5724 阅读 · 33 评论 -
vue项目导出word文件(根据word模板导出)
一、安装依赖包1、docxtemplaternpm install docxtemplater pizzip -S2、jszip-utilsnpm install jszip-utils -S3、pizzipnpm install pizzip -S4、FileSavernpm install file-saver --save二、创建Word模板根据格式样式要求,打开电脑桌面新建一个Word文档,调成需要导出的格式样式做为导出模板。数据使用{变量}代替模板存放位置:使用v原创 2021-07-06 11:30:28 · 5074 阅读 · 14 评论 -
Vue项目点击刷新页面的三种方式
Vue项目点击刷新页面的三种方式一、原生js刷新方式:location.reload();二、Vue框架自带的路由跳转方式:this.$router.go(0);三、在App.vue页面声明以下代码:<template> <div id="app"> <router-view v-if="isShow"/> </div></template><script>export default { n原创 2021-06-29 09:36:07 · 4106 阅读 · 0 评论 -
Ant desgin vue 表格滑动效果:
Ant desgin vue 表格自适应可滑动效果1.html代码块:<!-- 表格 --> <div class="admin_table_list"> <a-table :rowkey="id" bordered size="small" :components="components" :rowSelection="{ selectedRowKeys: selectedRowKeys, onCha原创 2021-05-14 17:09:52 · 1303 阅读 · 0 评论 -
ant desgin vue 列表分页
ant desgin vue 表格列表分页1、html代码块:记得把这个表格自带的分页关闭了:pagination="false"<!-- 表格 --> <div class="admin_table_list"> <a-table bordered :rowkey="id" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onS原创 2021-05-08 15:26:34 · 556 阅读 · 0 评论 -
常用的js语法
常用的js语法1、提取数组对象中的某个属性值,并返回一个新数组//实例一:单纯的提取数组对象中的某个属性值,返回一个数组var detailList = [ { id:1, name:'张三' }, { id:2, name:'李四' }, { id:3, name:'王五' },原创 2020-10-16 17:56:47 · 392 阅读 · 1 评论 -
Vue项目登录加密
前端Vue项目-登录加密-crypto-js加密 AES加密今天做了Vue项目的加密,主要做了登录接口,保证登录的安全性能。网上关于 AES 对称加密的算法介绍挺多的,对这一块还不是特别理解的小伙伴可自行百度,这里我推荐一篇AES加密算法的详细介绍与实现,讲的还是蛮详细的~要用 AES 算法加密,首先我们要引入 crypto-js ,crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5、SH原创 2020-08-31 18:14:35 · 2098 阅读 · 1 评论 -
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建Ant Design Pro of Vue下载安装启动步骤:一、Ant Design Pro of Vue 的介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。因为Ant Design Pro of V原创 2020-05-26 18:10:15 · 13307 阅读 · 11 评论 -
vue-cli项目中使用mockjs(基础使用和全局配置使用)
vue-cli项目中使用mockjs(基础使用和全局配置使用)很多时候前后端分离的项目在开发过程中前端所需数据和后端接口并不会同步开发,此时在接口对接之前就可以使用mockjs来自定义模拟数据vue项目中的请求一般也是使用Axios进行请求,而axios的的一个特点就是会自动拦截请求,今天搞了一下午,也参考了很多文章,差不多完成了demoaxios的使用参考官网。脚手架搭建好之后npm install mockjs // 安装mockjsnpm install axios // 安装axios原创 2020-05-13 18:11:04 · 2065 阅读 · 1 评论 -
vue中路由跳转的三种方式 简洁易懂
vue中路由跳转的三种方式 简洁易懂router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器。通过路由跳转的三种方式1.router-link1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="...原创 2019-12-21 11:42:59 · 1752 阅读 · 0 评论 -
使用Vue-cli 3.0搭建Vue项目
使用Vue-cli 3.0搭建Vue项目[2018-07-31更新]: vue-cli 3.0正式版的中文文档已经出来了,详细的可以参考:https://cli.vuejs.org/zh/guide/关于Vue的其他基础知识,可以看我的文章(持续更新中):\1. Vue入门(1)——简介与安装Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:...原创 2019-12-19 09:43:42 · 212 阅读 · 0 评论 -
快速搭建一个完整的vue的项目
搭建一个完整的vue的项目Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:可升级;基于 webpack 构建,并带有合理的默认...原创 2019-12-19 09:41:03 · 1237 阅读 · 0 评论 -
Vue常见项目案例
Vue.js 项目案例(不断收集中…)应用实例https://github.com/phanan/koel koel-基于网络的个人音频流媒体服务https://github.com/pagekit/pa… pagekit-轻量级的CMS建站系统https://github.com/Vuedo/vuedo vuedo-博客平台https://github.com/jackhutu/j… ...原创 2019-10-12 15:12:11 · 10581 阅读 · 1 评论 -
vue 路由跳转,路由传参的几种方式
vue 路由跳转,路由传参的几种方式1. router-link<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>2、$router方式跳转th...原创 2019-08-19 11:02:20 · 1039 阅读 · 0 评论 -
vue项目中使用lib-flexible解决移动端适配的问题
vue项目中使用lib-flexible解决移动端适配的问题第一部分:项目中引入lib-flexible一、项目中安装lib-flexible$ npm install lib-flexible二、查看是否安装完成1.打开packge.json文件,找到dependencies对象,如下:"dependencies": { "lib-flexible": "^0.3.2"...原创 2019-08-13 15:19:37 · 2175 阅读 · 0 评论