![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Wudq0601
快乐学习
展开
-
vue 项目 使用 echarts 折线图
先来张效果图安装echarts依赖npm install echarts -save在main.js中全局引入importechartsfrom"echarts";Vue.prototype.$echarts=echarts在页面中使用html 代码:<template> <div id="myChart" class="ch...原创 2020-03-06 15:58:20 · 1741 阅读 · 0 评论 -
element 自定义表格树
Element-ui 在 2.7.0 版本增加 Table 对树形结构数据的支持,官方API也给出了的相应的解决方案,虽然实现了功能,但是不一定能够满足我们日常开发的需求,所以就对它进行了二次封装,效果图如下:代码奉上:我是封装成了组件,在components 里创建文件夹 CustomTreeTable ,在CustomTreeTable 创建eval.js 和 index...原创 2019-07-22 13:12:23 · 1368 阅读 · 0 评论 -
element-ui tree 树形控件复选框实现单选
项目开发中在使用到 tree 树形控件实现单选功能,element-ui 官方给出来复选事件,并没有单选操作,自己就研究了一下,代码如下:1、template 代码中:<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="treeForm" show-che...原创 2019-05-23 20:01:24 · 17702 阅读 · 18 评论 -
element-ui table 表格控件实现单选功能
项目中实现 table 表格控件单选功能,如图:基本代码如下:1、template 代码中:<el-table :data="tableData" border stripe ref="tableData" @row-click="singleElection"> <el-table-column label=""...原创 2019-05-20 17:21:47 · 15906 阅读 · 12 评论 -
element-ui tree树形控件实现全选功能
项目中实现 tree 树形控件全选功能,如图:代码如下:1、template 代码中:<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><el-tree :data="organizationData" ref="organi...原创 2019-05-20 15:50:59 · 15429 阅读 · 10 评论 -
element-ui el-cascader 级联选择器 联动默认值
在使用 element-ui 的 el-cascader 组件根据后台返回的数据,需要展示一个默认值,官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader借鉴了一下,话不多说直接上代码:效果图:代码块:<template> <div class="block"> ...原创 2019-04-29 13:34:34 · 16373 阅读 · 0 评论 -
Vue父组件调用子组件与子组件调用父组件方法
一、父组件调用子组件方法1、父组件通过 $refs 来调用子组件父组件代码<template> <div @click="parent()"> <children ref="myChild"></children> </div></template><script>export ...原创 2019-03-28 11:09:56 · 849 阅读 · 0 评论 -
vue 之 element-ui 实现全选和复选框
element-ui表格实现全选和多选功能,先看效果图:代码也是相对简单,根据官网提供的API来实现,具体代码奉上:<template> <div> <el-table :data="tableData" border style="width: 100%"&...原创 2018-12-28 20:51:26 · 12370 阅读 · 5 评论 -
vue 之 element-ui 点击添加一组数组与原数组互不影响
最近遇到这样一个需求:界面默认显示一组数组,点击新增增加一条并且显示删除按钮,数组里有input和下拉框,每组数组的数据互不影响,效果如下图(图制作的有点简陋):代码如下:<template> <div> <div class="lk-toolbar" v-for="(name, key) in form" :key="key"&..原创 2018-12-27 11:17:11 · 3205 阅读 · 2 评论 -
vue中axios封装及自动设置域名
现在越来越多的 Vue.js 项目里使用 axios,而不在使用 vue-resource,在使用 axios 都会进行一次封装,接口集中管理,还有各个环境域名自动匹配设置1、安装axios:npm install --save axios2、在 main.js 引用 axios 因为我进行了一次封装,所以可能和大家引用的方式不一样,我是在src文件里创建了一个 fetc...原创 2018-12-01 15:26:12 · 5644 阅读 · 0 评论 -
Vue.js常用的指令
vue.js 的指令是以 v- 开头的,它们作用于 HTML 元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看做特殊的HTML特性。v-if 指令v-if 是条件渲染指令,它根据表达式的真假来删除和插入元素。v-show指令v-show 也是条件渲染指令,和 v-if 不同的是,使用 v-show 指令始终会被渲染到H...原创 2018-11-10 15:23:03 · 404 阅读 · 0 评论 -
如何去掉vue路径中的“#”号
我们在vue项目中使用vue-router时,路径中会有 # 号,这样看着也不舒服。其实是因为路由有两种模式 hash 和 history,我们平时直接使用的是默认的hash,所以路径会有 # 号,因此我们只需要修改成 history 就可以了,如下图:如果我们修改成 history 还需要后台配置支持,否则在浏览器直接访问路径就会返回404。至于具体的后台配置请访问官网https://r...原创 2018-10-26 16:38:09 · 13505 阅读 · 0 评论 -
快速搭建vue项目从零开始
最近公司一直在使用vue来做项目,今天就把一些使用vue的方法分享一下,希望能对大家有所帮助。同时,有说的不对的地方,欢迎大家能够指出。一、使用vue-cli脚手架从零开始搭建首先要确定自己电脑上已经安装了nodejs,可以使用node -v检查一下,如果没有安装请访问nodejs官网,选择自己适合的版本。1.安装vue-cli:npm install -g vue-cli2....原创 2018-10-25 15:00:46 · 2139 阅读 · 0 评论