vue
关注
分享
扫一扫
文章平均质量分 60
VIVI Xiao
前端开发程序员
展开
-
Vue----Element UI 表格点击某一行完成选中事件或取消选中事件
需求：点击表格的某一行，即可触发选中该行。如同element table中组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。如下图。但element仅提供了单选，那多选的情况如何实现呢？多选点击效果如下：选中某一行后，相当于对应的checkbox被选中实现如下：界面：在表格上添加以下三个参数<el-table border ref="serveTable" :data="tableData" @selection-原创 2020-05-22 16:09:45 · 21134 阅读 · 7 评论 -
Vue-----Vue Router 的params和query传参的使用和区别
在路由声明中：export default new Router({mode: ‘history’,routes: [{path: ‘/info/:id’,name:‘info’,component: () => import(’…/components/HelloInfo.vue’),}]});跳转：query传参： this.router.push(name:′...原创 2020-03-27 13:53:44 · 343 阅读 · 0 评论 -
Vue----Vue-Router安装及使用
安装npm install vue-router新建router文件夹，在文件夹中添加index.js文件，引入vue-routerimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);export default new Router({ mode: 'history', ro...原创 2020-03-27 11:42:29 · 1638 阅读 · 0 评论 -
Vue----右键弹出菜单(vue-contextmenu)
需求：点击右键，弹出菜单，查询资料，找到vue-contextmenu。项目地址：https://github.com/chIIC/vue-contextmenu安装：npm install vue-contextmenu --save引入：import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)使用：...原创 2020-03-23 14:06:16 · 24894 阅读 · 6 评论 -
VUE----监听浏览器窗口大小的改变
如题，方法如下：export default { data(){ return { clientWidth:document.body.clientWidth } }, mounted(){ let that = this; window.onresize =() =>{ ...原创 2020-03-20 16:41:32 · 5119 阅读 · 0 评论 -
vue-socket.io引发的浏览器兼容问题
问题：因项目需要用到socketIO进行通讯,通过npm install vue-socket.io，后将其运入即可，如下：//引入socket.ioimport VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({ debug: true, connection: 'http://172.16.101.250:2...原创 2020-03-20 13:52:51 · 1285 阅读 · 2 评论 -
Vue----axios中传数组
今天用axios中get方法传输数组，发现了是这样的。。。于是了解了一下，可以采用qs库自带的 arrayFormat 参数配置做一下转化，如下：import axios from 'axios'import qs from 'qs'//get方法：axios.get(url, { params: { target: [1,2,3], type: 1 ...原创 2020-03-19 17:05:13 · 578 阅读 · 0 评论 -
Vue-----element框架中，可输入下拉框（el-select和el-autocomplete对比）
需求：需要一个即可选择也可输入的输入框,且需要自定义模板（输入视频源url时，其名称也需展示）。考虑到element有两种组件可实现，那么就来对比一下这两种实现：的实现比较简单，参考element的官网：https://element.eleme.io/#/zh-CN/component/select只需加filterable allow-create即可完成此需求，且有clearable...原创 2020-03-19 16:45:07 · 17922 阅读 · 1 评论 -
VUE------element框架 Form表单中回车事件出现页面刷新问题解决
问题描述：在给输入框添加回车事件时，发现一按回车，页面就刷新了。怀疑是form表单的原因，经查询，是由于当form表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。解决办法：在el-from 加上 @submit.native.prevent如下代码： <el-dialog title="请输入要添加的节点" :visible.sync="dialogAddVis...原创 2020-03-19 11:09:34 · 746 阅读 · 1 评论 -
VUE----vue-cli3.0设置页面icon图标
最近做的一个项目中在用vue-cli3.0创建项目的时候不小心选择了pwa这一个插件，碰到了不能设置网页图标的问题。在最新的vue-cli3.0直接在index.html中设置icon是不行的，需要在vue.config.js中设置一个pwa属性。重要！！！将public下的应文件夹下的icon下的图标都删除掉。 vue.config.js module.exports = {...原创 2020-03-17 09:45:41 · 2724 阅读 · 0 评论 -
vue----使用echart基本使用（关于图标坐标轴文字过长，自定义样式等问题详细讲解）
在开发项目中，经常需要使用到表格，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。v-charts官网：https://v-charts.js.org/#/基本使用：npm安装：npm i v-charts echarts -S...原创 2020-03-27 15:09:59 · 2121 阅读 · 0 评论 -
VUE----限制无权限路径访问
需求 后台系统从后台获取允许访问的菜单列表，并在右侧菜单栏展示，但路由已在router.js中配置完成，此时无权限的路径不展示在前端页面，但用户仍可输入url进行访问。则需要解决该问题。解决办法：1.从后台获取的允许访问的菜单列表储存在vuex或localStorage中2.在router.js中对需要进行需要校验权限的页面配置*meta: { requiresAuth: true }*属...原创 2020-02-29 11:37:57 · 4542 阅读 · 3 评论 -
VUE----mounted()函数中无法定义初始化样式的原因
基于vue框架在mounted()函数中，初始化某一个元素的css样式，发现无法成功。解决办法：使用nextTickthis.$nextTick()函数作用是等页面的数据更新完成以后，它再执行内部回调函数中的逻辑参考如下：<div> <span ref="red">我需要初始化颜色</span></div>new Vue({ ...原创 2019-12-27 16:00:31 · 1682 阅读 · 0 评论