vue
关注
分享
扫一扫
文章平均质量分 56
Code神之手
人生辗转，起伏无常。活在当下。
1.01的365次方=37.78343433289>1；
0.99的365次方= 0.02551796445229<1
展开
-
vue table复杂表格导出excel（支持多表头、合并单元格、边框、居中、背景等自定义样式）
需要导出的table表格样式常规导出的excel效果图复杂(多表头、合并单元格等等)导出的excel效果图安装npm install file-saver --save npm install xlsx --save npm install xlsx-style --save引入import XLSX from "xlsx";import XLSXStyle from "xlsx-style";import FileSa...原创 2021-10-13 19:05:11 · 8079 阅读 · 9 评论 -
vue el-table表格数据,不分页,鼠标滚动实现数据懒加载
当前有一个需求，页面不分页，又想在一页显示全部数据，这个时候其实就可以用数据懒加载。随鼠标滚动到滚动条末尾，自动加载下一页的数据。create的时候默认加载20条数据这里差不多到末端了鼠标滑到末端后，触发加载第二页数据代码实现：先定义个table (getPageBodyHeight 方法是我通过页面自适应监听页面宽高变化，之前帖子有栗子，计算table的高度，简单点的可以自己设置固定高度)<el-table border .原创 2021-10-13 11:20:18 · 11616 阅读 · 1 评论 -
vue中字符串文本长度超出显示省略号...及悬浮显示全部文本
效果图<el-form-item :label="$t('operationStockInAccept.reasonForReturn') + '：'"> <span class="spanStyle" :title="warehousingEntry.enterReason">{{warehousingEntry.enterReason}}</span></el-form-item>ps:需要设置span 的title属性，这个属性.原创 2021-02-04 10:03:45 · 8468 阅读 · 6 评论 -
前端element-ui Loading全屏全局加载动画(路由跳转和拦截请求触发)及自定义Loading图标
目录自定义加载Loading图标效果图基于封装axios请求的request.js实现自定义Loading图标集成Loading后的request.js完整代码基于Vuex的方式实现全屏全局加载官网element-ui的loading组件介绍自定义加载Loading图标效果图基于封装axios请求的request.js实现未集成loading的request.jsimport axios from 'axios';import {Messag...原创 2021-01-21 15:42:40 · 10063 阅读 · 1 评论 -
前端表单填写复杂场景,el-form中嵌套table进行表单必填字段自定义校验规则,column中用slot-scope=“scope“插槽方式定义列
目录效果图前端代码实现效果图触发自定义el-form-item中的定义的校验规则其他移动类型的页面前端代码实现<template> <div id="businessBatchOperation"> <page-back-header :page-name="$t('sidebar.businessBatchOperation')"></page-back-header> ..原创 2020-12-31 10:26:03 · 1742 阅读 · 0 评论 -
前端之el-tree＋el-Popover 弹出框联动，封装成供选择信息的弹窗Dialog
效果图图一图2：选择的数据回显图3：已选的数据，如果重新打开分类下的Popover 弹出框，会自动打上勾。如果点击删除数据，会自动出去打勾。页面描述当选择分类树的某一个分类后(如苹果手机)，判断是否为叶子节点，如果非叶子节点，则不加载Popover 弹出框。如果为叶子节点则加载第一个Popover 弹出框。第一个Popover为产品某个分类下的产品(如苹果12)。当选择了某一产品后，则加载第二个Popover 弹出框，显示产品下对应的产品规格属性列表(如苹果12的颜色：白原创 2020-12-31 10:08:47 · 4832 阅读 · 0 评论 -
vue路由跳转之两种方式query和params
需要跳转到下面这个页面{ path: '/transfer_order_query', name: 'TransferOrderQuery', component: resolve => require(['@/components/transferOrder/TransferOrder.vue'], resolve), meta: { title: '转储单查询'.原创 2020-12-21 15:49:30 · 654 阅读 · 0 评论 -
前端element下拉菜单样式修改
组件官方链接el-dropdown: 下拉菜单组件el-dropdown-menu 结合 el-dropdown-item： 下拉菜单项trigger="click" ： 表示显示下拉菜单内容是由点击事件触发@command： 绑定点击下拉菜单的内容触发的事件style="float:left" ：向左靠 <div style="float: right;padding-bottom: 10px"> <!--按月-...原创 2020-12-03 15:04:20 · 2414 阅读 · 0 评论 -
vue之父子通信，父调子方法和子调父方法写法
子调父的方法先设置一个变量定义方法 <ContactDialog :defined-dialog-width="definedDialogWidth" :dialog-table-visible="dialogTableVisible" :editFlag="editFlag" :contactCustomerInfo="contactCustomerInfo"原创 2020-07-27 16:47:06 · 2067 阅读 · 0 评论 -
前端语法汇总笔记
日行积累...event.target.tagName：tagName属性，返回的就是元素标签的大写名称<button v-on:click="greet">Greet</button> methods: { greet: function (event) { // `this` 在方法里指向当前 Vue 实例 alert('...原创 2020-04-13 10:54:16 · 321 阅读 · 0 评论 -
Vue CLI 3构建vue+组件库ant design pro前端项目
开始构建vue-cli 3 (vue-cli里包含了webpack)vue init webpack ant-design-vue-procd d:cd D:\webstorm_project2020\ant-design-vue-pronpm i ant-design-vue momentnpm run server...原创 2020-04-11 17:39:20 · 2357 阅读 · 0 评论 -
Vue CLI 3构建vue+组件库ant design pro前端项目之使用嵌套路由设计
路由设计两种方式方式1：模拟登录注册页面跳转src/component目录下，创建一个RenderRouterView.vue文件<template> <router-view></router-view></template><script> export default { ...原创 2020-04-11 21:48:52 · 1091 阅读 · 0 评论 -
vue之自定义通用搜索框日志记录
<template> <div class="testPage"> <div> <back></back> <!--导航栏--> <div class="crumbs"> <el-...原创 2020-03-18 17:13:33 · 378 阅读 · 0 评论 -
vue路由多个传参的三种基本方式
业务场景：需要在选中行，查看详情数据，进行页面跳转前端行数据页面显示<el-table-column label="更多操作" width="90" > <template slot-scope="scope"> <el-button type="success" @click="showSlineDetai...原创 2020-01-07 11:14:41 · 3342 阅读 · 0 评论 -
el-table-column日期格式化
如果想对表格某一列的内容格式化，可用 formatter 属性。属性绑定格式化的方法即可<!--时间范围--> <el-table-column prop="startTime" ...原创 2020-01-06 14:50:25 · 12247 阅读 · 0 评论 -
vue项目执行npm install报错
问题1：提示没有权限解决方案配置npm服务地址：账号及密码登录、邮件登录npm登录私服：npm login --registry=http://registry.xxx:端口/repository/xxx-npm/Username: xxxPassword: xxxEmail: (this IS public) xxx@xxxcmp.cnnpm login --regis...原创 2019-12-03 12:17:35 · 7285 阅读 · 0 评论 -
windows环境搭建Vue开发环境
windows环境搭建Vue开发环境参考：https://www.cnblogs.com/zhaomeizi/p/8483597.html原创 2019-11-27 00:13:01 · 330 阅读 · 0 评论 -
vue理解时需要理解问题记录
解析.vue文件用来干嘛的？说明：把组件模块都提取出来，写在一个xxx.vue的文件上，但解析这种.vue结尾的文件也不是一份轻松的工作参考： https://blog.youkuaiyun.com/qq408896436/article/details/79266376解析.vue文件引出：es6，babel插件安装和如何配置，javascript的编译器/解码器/转码器/解析器...原创 2019-11-15 12:17:56 · 143 阅读 · 0 评论 -
vue自定义组件注册到UI组件库,通过Vue.use()来全局使用自定义组件,即install的使用
写好的组件在index.js文件中import导入vue组件对象，通过install方法设置到ui组件库中，其他的子组件就可以使用Vue.use()来全局使用自定义的组件了。xx.vue// Component.vue<template> <div> 我是组件 </div></template>...原创 2019-11-15 12:15:32 · 597 阅读 · 0 评论 -
vue项目运行入口
首先是跑前端项目，输入指令：npm installnpm run dev/npm run start命令对应的执行配置：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js当在命令窗口输入npm run dev时，编译器会去查找build目录下的webpack.dev.con...原创 2019-11-15 11:26:53 · 6507 阅读 · 0 评论 -
vue之单属性监听和对象的深度监听笔记
watch:{} ：可以监听数据，数据发生变化， 处理函数深度监听设置：deep:true,handler(){函数方法}目的： watch虽可监听，但只是浅监听，只监听数据第一层或者第二层，何为第二层？const pagination= {searchstr: 'xx', child: {page: 10,rowsPerPage:25,sortBy:"vplmId",d...原创 2019-11-14 23:15:15 · 300 阅读 · 0 评论 -
Vue引入vuetify框架
问题记录：vuetify-icon图标显示不正常npm install material-design-icons-iconfont -Dimport 'material-design-icons-iconfont/dist/material-design-icons.css'推荐：https://blog.youkuaiyun.com/qq_39045645/a...原创 2019-11-14 17:53:14 · 379 阅读 · 0 评论 -
vue 里.js文件和.vue文件
main.js和App.vue位于同级目录。main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue' ...原创 2019-11-14 14:53:47 · 3305 阅读 · 0 评论 -
前端项目webpack构建目录结构,vue前端开发，开发工具vscode
前端项目构建步骤1：npm init -y说明：Wrote to D:\idea\vue\vue_init\package.json: 生成package.json文件类似于创建pom文件，导入依赖用步骤2：npm install vue --save说明：项目引入vue框架，安装就可以使用vue组件了生成package-lock.json文件，里面有镜像...原创 2019-11-14 11:38:48 · 563 阅读 · 0 评论 -
搭建vue-cli脚手架开发环境笔记
前置条件：下载安装nodejs包含了npm（和maven类似，管理依赖） 默认使用的仓库地址事国外安装nrmnpm install nrm -g (global全局)使用nrm切换镜像工具，切换到taobaonrm use taobao单独引入vue.js开发的项目搭建vue开发环境npm init -y生成类似于pom文件Wrote to D:\idea...原创 2019-10-20 22:18:45 · 243 阅读 · 0 评论 -
安装vue以及vue环境搭建
安装nodejs包含了npm（和maven类似，管理依赖） 默认使用的仓库地址事国外安装nrmnpm install nrm -g (global全局)使用nrm切换镜像工具，切换到taobaonrm use taobao项目搭建vue开发环境：创建工程npm init -y生成类似于pom文件Wrote to D:\idea_project\vue\js...原创 2019-10-19 03:31:27 · 219 阅读 · 1 评论 -
vue基础入门笔记
js获取元素值方式：document.getElementById("xxidxx").innerHTML插值：{{msg}}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title...原创 2019-10-15 17:45:15 · 549 阅读 · 0 评论