VUE
Nazgul丶戒灵
这个作者很懒,什么都没留下…
展开
-
vue 按钮点击前一天,后一天改变日期
<template> <div>{{dateTime}}</div> <div> <button @click="prevDate">前一天</button> <button @click="nextDate">后一天</button> </div></template><script>data() { return { selDateT.原创 2020-11-30 15:05:04 · 1583 阅读 · 1 评论 -
element-ui tree 节点过滤加载对应子节点
element-ui tree 节点过滤加载对应子节点方法,官网例子,不会返回过滤节点的子节点,这也是总结这篇博客的原因。//官网例子<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :f原创 2020-10-16 14:41:29 · 1985 阅读 · 7 评论 -
element-ui table 单元格可编辑
基本思想在单元格中放input,然后设置border为0,当input focus时 设置border为1参考代码<el-table :data="auditRule.params" border style="width: 100%"> <el-table-column prop="paramName" label="标识" width="150"> <template slot-scope="scope">原创 2020-10-14 10:32:10 · 461 阅读 · 0 评论 -
vue动态绑定class选中当前列表变色的方法示例
这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。先看看效果图吧接下来我们看看怎么实现的吧在methods中写入一个方法 1 2 3 clickcategory(index){ // 这里我们传入一个当前值 this.categoryIndex = index } clickcategory(index){ // 这里我们传入一个当前值 this.categoryIndex = index.原创 2020-09-21 14:34:34 · 438 阅读 · 0 评论 -
element-UI中el-select下拉框,filter-method自定义,可按拼音名称搜索
<el-select v-model="item.memo" placeholder="" clearable allow-create filterable :filter-method="dataFilter" style="width: 100px"> <el-option v-for="it in channelList" :key="it.rid" :label="it.prop_val" :value="it.rid" /></el-select>.原创 2020-08-12 11:30:22 · 9977 阅读 · 1 评论 -
多表单Form验证
题外话:From表单验证报错:[Element Warn][Form]model is required for validate to work!检查一下<el-from>标签里不是使用的module而是使用v-module导致的。 <el-form-item>标签里没有使用v-module导致的。 <el-form-item>标签里prop参数的命名没有和<el-from>标签里module数据源对象里的一致。多表单Form验证asy.原创 2020-07-30 17:34:05 · 373 阅读 · 0 评论 -
vue+element-ui实现多选框绑定数组对象
现在我们有一个数组对象 : const cityOptions = [{id: 1, cityName: ‘上海’}, {id: 2, cityName: ‘北京’}];1 :label = city,直接绑定对象【不支持反显】<template> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in cities" :label="city" :key="city.原创 2020-07-17 11:22:59 · 4350 阅读 · 0 评论 -
element-ui 点击行如何获取table的行索引
文档中有一个tableRowClassName方法,可以获取到当前行的index, 1 2 3 4 <strong>tableRowClassName ({row, rowIndex}) { //把每一行的索引放进row row.index = rowIndex; } </strong> 例子:表头:<el-table :data="list"...原创 2020-07-02 14:28:58 · 2155 阅读 · 1 评论 -
element-ui+vue,翻页添加首页、尾页跳转按钮
分页代码<div class="reportfont"> <el-button type="button" @click="jumpFirstPage" class="my-btn">首页</el-button> <el-pagination ref="pagination" background prev-text="上一页" next-text="下一页" layout="prev,.原创 2020-06-04 15:40:03 · 4541 阅读 · 4 评论 -
Vue的全局组件
Vue是一个组件化开发的框架,一般我们在项目中使用组件的步骤是这样的。1.创建一个组件:比方说我们现在新建一个demo.vue文件,随便写一行代码。 <template> <div> <h1>{{msg}}</h1> </div> </template><script>export default { data() { return原创 2020-05-29 10:17:25 · 515 阅读 · 0 评论 -
Vue子组件调用父组件的方法
Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> impor...原创 2020-03-18 09:28:45 · 118 阅读 · 0 评论 -
Vue中关闭dialog时销毁DOM、数据等
背景:今天在写Vue时遇到一个用element-ui的dialog时,里面用路由引用的其它页面。多个数据共用一个dialog,但是除了第一次点击的时候,触发了引用页面的created()里方法,无论再怎么点击其它数据的方法也无法触发created(),原因应该就是DOM已经渲染完毕不会再次渲染了,所以想要用其他数据就需要销毁一下。参考文章:https://blog.csdn.net/qq_...原创 2019-12-04 14:59:12 · 12094 阅读 · 6 评论 -
vue实现鼠标移入移出事件
之前用过一次,不经常用,忘记了,所以记录一下自己留着备用@mouseenter="bcolor($event)"@mouseleave="wcolor($event)"这2个为移入、移除触发事件bcolor: function(e){ e.target.style.backgroundColor = "#efefef"}wcolor: function(e){ ...原创 2019-11-12 15:24:15 · 4337 阅读 · 0 评论 -
vue elementui 动态获取数据 遍历循环 生成el-radio-group
单选先看一下单选实际效果图点击编辑图标显示单选框实际上是比较简单的。由于很多数据是从数据库里取出来的。先看一下我存入的数据格式,为了方便操作,我是单选一张表,多选一张表,当然也可以放在一起,我是为了灵活多用,避免数据混淆,出现bug,说到底就是不做那么多判断,太麻烦了<el-card class="boxs-card"> <...原创 2019-11-11 13:42:30 · 6027 阅读 · 0 评论 -
VUE 点击其它区域触发事件(关闭、修改等)
看完这个文章后总结的:https://blog.csdn.net/xingyu_qie/article/details/78831045虽然是暴躁老哥,但是说的一点没错,现在答疑的家伙真的是不靠谱,要么就是百度黏贴复制说的跟问的没关系闲扯淡,要么就是当你是代码大神说了一句你不明白、也看不懂的代码,就让你用去吧。真想骂人,我要是能理解你们说的代码我还百度干什么?言归正传,主要解决问题...原创 2019-11-08 11:26:19 · 6951 阅读 · 4 评论 -
【vue.js】生命周期 和 bus.$on事件被多次绑定
记录一下周期问题,是因为$on()多次触发导致的,所以先解决一下$on()多次绑定问题vue中bus.$on事件被多次绑定问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on )bus.$off('pagechangep'); //先解...原创 2019-10-23 09:49:29 · 899 阅读 · 0 评论 -
Vue生命周期中mounted和created的区别
一、什么是生命周期?用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:二、created和mounted区别?官方图解如下:我们从图中看两个节点:created:在模板渲染成html前调用,即通常初始化某些属性值,...原创 2019-08-27 09:02:20 · 241 阅读 · 0 评论 -
element-ui表格+分页器数据分页展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme...原创 2019-08-27 10:04:36 · 1089 阅读 · 0 评论 -
Vue 实现展开折叠效果
效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185上述链接中,大佬给除了解决方法,再次进行总结,方便以后使用。除了使用jQuery的方式实现上述效果,同样可以在Vue实现,下面是解决办法:1、创建collapse.js文件const elTransition = "0.3s height ea...原创 2019-09-03 10:45:28 · 7861 阅读 · 0 评论 -
解决element-ui中多个table在tab切换时出现宽度缩小的问题
用的是vue的element-ui前端框架今天遇到一个小问题,花了我几个小时才研究先看图我需要在两个tab中各自放一个tab...原创 2019-09-03 16:50:59 · 4718 阅读 · 0 评论 -
element-ui的el-tree 实现鼠标移入子节点,显示删除、修改等功能按钮
1、tree 组件代码<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all node-key="id" :filter-node-method="filterNode" ref="tree"> <span class="custom-tree-nod...原创 2019-09-09 16:56:57 · 4114 阅读 · 5 评论 -
上传file时accept限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式
<input type="file" accept="image/*" /> accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。VUE不好用accept可以指定如下信息: *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video *.ac3...原创 2019-09-11 16:08:28 · 21564 阅读 · 1 评论 -
vue 中使用 async/await 将 axios 异步请求同步化处理
1. axios 常规用法:export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, created () { this.getHistoryData() }, methods: { hand...原创 2019-09-12 14:06:55 · 3083 阅读 · 0 评论 -
vue中 关于$emit的用法
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn;例如:子组件:<template> <div class="train-city"> &l...原创 2019-09-16 15:30:10 · 141 阅读 · 0 评论 -
vue拖拽排序插件vuedraggable使用方法详解
HTML引用(vue引用随便百度都有在此不做简介)<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script><!-- CDNJS :: Sortable (https://cdnjs.com/) --><script src="//cdn.jsdeli...原创 2019-09-21 10:48:11 · 3651 阅读 · 0 评论 -
修改element-ui table高亮颜色
从Element网站上找到对于table表格的整行选中的效果如下: 但是默认的这个整行选中背景颜色有点浅,如果相对其修改背景...原创 2019-09-29 10:56:17 · 8175 阅读 · 0 评论 -
vue开发中使用axios的post方法传递参数springmvc接受不到参数
背景: 前后端分离项目中, 前端vue项目使用axios发起请求。 spring的controller中习惯使用@requestMapping注解,发现使用post请求时,后端接口不使用实体无法接受到参数, 前端参数必须经过处理才能接受到。 get请求在参数格式不对的情况下,也会导致controller无法接受到参数。post请求参数需要特殊处理主要和请求头的格式有关, 如:applicat...原创 2019-08-22 14:37:10 · 748 阅读 · 0 评论