最近在数据源管理功能，需要以树的形式异步展现： 根节点可以新增目录。目录节点可以新增目录，编辑目录，新增主数据。主数据节点无操作按钮。找到element-ui的官方文档，el-tree。（地址：http://element-cn.eleme.io/#/zh-CN/component/tree ） 结合自定义节点内容： 1.节点后添加操作按钮renderContent(h, { node, data }) {return (<span class="custom-tree-node"><span>{node.label}</span><span><iv-show={node.level =...
1.后台接口为点击加载下一级 ，传省市区id<template><el-cascaderv-model="selectedOptions"placeholder="请选择省市区":options="cascaderData"@active-item-change="handleItemChange":props="{value: ‘id‘,label: ‘name‘,children: ‘cities‘}"></el-cascader> </template><script> export default {name: ‘my-provinces‘,data () {return {departmentOptions: [],cascaderData: [],selectedOptions: []}},methods: {get...
需求：通过不同的参数复用同一组件，实现动态加载数据和图片，同时，在页面刷新时，图片依旧可以加载成功。过程出现的bug和问题： 1、使用params传参后，再次刷新页面，参数丢失导致数据无法再次加载 2、改用query进行传参后，页面刷新后图片无法加载，这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值，而赋值之后页面已经渲染完成，导致图片无法加载成功解决方案： 1、通过localStorage将数据持久化，...
下面我就为大家分享一篇基于vue 动态加载图片src的解决方法，具有很好的参考价值，希望对大家有所帮助。好久没更博了，最近也不知道在忙啥，反正就是感觉挺忙的，在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况，这篇就简单的说明为什么会出现以及解决办法有哪些。首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助assets：在项目编译的过程中会被webpack处理解析...
本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，因此小伙伴们只能将就看一下下面的截图了，GitHub上有部署教程，部署到本地也可以查看完整效果。项目地址：https://github.com/lenve/vhr前面几篇文章，...
首先新建vue工程，一般我们不会特殊处理路由，但当项目页面越来越多，路由配置也会越来越大，路由文件就会变得不好维护 import Vue from vue import Router from vue-router import HelloWorld from @/components/HelloWorld import Home from @/components/Home import Test1 from ./test1.router.js import Test2 from @/components/children/Test2 import Test3 from @/components/children/Test3Vue.use(Router)export default...
基于 iview Tabs 组件实现 功能：为每个 tab 动态创建不同的、特定的组件内容，而不需要大量的 import 组件并进行 component 注册 Index.vue<template><div class="content-left-menu"><div class="item-contain layout-content"><Tabs class="cmcc-ivu-tab2" type="card" closable><TabPane v-for="k in zj" :label="k.label" ><loader :vueName="k.vueName"></loader></TabPane></Tabs></div></div> </template> <script>import ...
目录：注意：本地json文件和json文件里的图片地址都必须写在static 静态文件夹里；否则json文件里的url地址找不到。 major_info.json文件里的图片路径写法页面通过v-bind的方式加载：PS：vue中图片src路径赋值 vue中引入static文件夹中图片，本以为src中直接写入图片所在路径即可，结果发现图片无法显示，控制台报404错误，图片无法找到。网上找到解决方案，在此mark一下，以便以后查询。 图片src路径动态赋值 <img class="thumb" ...
背景： 目前我们项目都是按组件划分的，然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信，这种情况下iframe并不是最好的选择，iframe存在跨域的问题，当然是postMessage还是可以通信的，但也并非是最好的。目前有这么一个场景：门户需要制作通用的首页和数据概览页面，首页和数据概览页面通过小部件来自由拼接。业务组件在制作的时候只需要提供各个模块小部件的...
一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() {return {formData: {avatar: require(@/assets/icon1524737568182.png),motto: xxxxxxxxxx},routers: this.$router.options.routes}}3. 在需要的地方引入图片 <div class="avatar"><img :src="formData.avatar" alt=""></div>二. 加载请求获取到的图片 1.配置文档build/webpack.base.conf.js {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: url-loader,exclude: ...
Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决（保证在数据请求之后再渲染页面） 页面结构 <div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide tpOne" v-if="topInfo"><-- 此处为绑定数据的轮播元素 --><div class="bannerBox1"><div class="l_label" >{{topInfo.label}}</div><div class="l_title" >{{topInfo.title}}</div><div ...
说说Vue.js组件 什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。 one----全局组件引入写法：在项目的main.js中： 第一种，在m...
什么是组件： 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示： //正常加载 import index from ../pages/index.vue import view from ../pages/view.vue //懒加载 const index = resolve => req...
在这里我们将会实现一个vue动态路由的案列，当用户登陆成功后，根据用户的角色，拿到他对应的菜单信息，并将它动态的载入到我们的路由中。 我们的通用的后台管理系统中，我们会根据权限的粗细不同，会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现，关于后台接口我就不会涉及，当我接触的时候我们的后台接口是springcloud实现。 一、思路在vue-router对象中首先初始化...
好久没更博了，最近也不知道在忙啥，反正就是感觉挺忙的，在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况，这篇就简单的说明为什么会出现以及解决办法有哪些。 首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助 assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./l...