vue学习
Feast_aw
学无止境
展开
-
vue 9宫格抽奖
<div id="app"> <div class="prize-box"> <div :class="{active: activeIndex === index, 'prize-cell': true}" v-for="(item, index) in list" :key="item.id"> <img v-if="item.img" :alt="item.label" :src="item.img"> .原创 2021-07-08 11:29:57 · 265 阅读 · 0 评论 -
vuecli3处理移动端title
在main.js中配置路由全局钩子函数原创 2020-03-21 10:12:06 · 511 阅读 · 0 评论 -
vue-cli3 vant rem适配
1、首先我们要安装vantyarn add vant2、安装自动按需引入组件yarn add babel-plugin-import --save3、配置文件,在babel.config.jsmodule.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ['impo...原创 2020-03-20 15:27:41 · 317 阅读 · 0 评论 -
element table某些行背景颜色设置
<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" ref="multipleTable" class="bgf" border header-row-class-...原创 2020-03-01 12:13:52 · 11109 阅读 · 1 评论 -
element 时间控件只能选择范围控制
<template> <div> <el-date-picker v-model="value1" :picker-options="pickerOptions" type="date" placeholder="选择日期"/> </div></template>&l...原创 2019-12-04 11:33:31 · 329 阅读 · 0 评论 -
element动态表头,动态列
<el-checkbox :key="index" v-model="item.show" :label="item.label" v-for="(item,index) in tableHeader" /><el-table :data="tableData" v-loading="loading" ...原创 2019-11-27 19:28:50 · 328 阅读 · 0 评论 -
element table多选部分禁用功能
<el-table-column :selectable="isDisabled" type="selection" width="55"/>isDisabled(row){ if(row.experience_status === '1'){ return 0; } return 1; }...原创 2019-11-27 19:23:01 · 5508 阅读 · 0 评论 -
vue element表格动态表头、动态列
<span v-click-outside="hideChoose" class="icon-choose fr pointer mr10" @click="showChoose"> <div v-show="isChooseCols" class="cols-choose-list"> <el-checkbox :key="in...原创 2019-07-25 17:34:56 · 2453 阅读 · 0 评论 -
vue项目中使用mixin
基类export default { name: "basePage", created() { console.log("baseCreated"); }, methods: { onClick() { console.log('baseClick'); }, }}子类页面import basePage from './mix...原创 2019-07-06 18:51:47 · 514 阅读 · 0 评论 -
element ui tree实现单选
<el-tree :data="treeData" :check-strictly="true" :default-expanded-keys="parentEditArr" :default-checked-keys="editArr" ref="tree" current-node-key node-key="id" sh...原创 2019-07-06 18:40:14 · 1108 阅读 · 0 评论 -
element ui 表格(table)里边使用Switch开关,单独控制
表格部分代码data数据里边原创 2019-06-14 20:38:10 · 28108 阅读 · 16 评论 -
vue刷新当前页面,重载页面数据
在vue管理后台中,表格经常会有增删改查,修改完之后就要刷新页面或者调方法,但是在权限菜单角色页面,你如果改变当前登录的账号的权限时,你就需要全局刷新,然而好多方法并没有在当前页,所以比较麻烦,如果用this.$router.go(0),会强制刷新比较丑,所以就得允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效1.根组件APP.vue里面,...原创 2018-07-27 17:07:28 · 4533 阅读 · 2 评论 -
vue query跟params 传参的区别
//分配权限 checkClick(row){ this.$router.push({path:"/powerTree",params:{id:row.id}}) },//在对应的页面接收传的这个参数 mounted() { alert(this.$route.params.id) },这样出来就会是undefinedparams只能用na...原创 2018-07-24 17:14:22 · 712 阅读 · 1 评论 -
解决vue某些浏览器不支持promise造成白屏问题
npm install babel-polyfill --save 在main.js引入import 'babel-polyfill'原创 2018-06-06 18:16:27 · 2451 阅读 · 0 评论 -
vue实现吸顶效果
这个是html部分其中 isFixed的是在data中定义,初始值给个false<div class="header " id="header" :class="isFixed== true?'isFixed':''"> <div class=" fixed-width clearfix"> <div class="原创 2018-06-14 12:26:09 · 4275 阅读 · 1 评论 -
vue生命周期钩子
2.一般的执行顺序(从上往下):beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$e...转载 2018-06-14 13:52:21 · 288 阅读 · 0 评论 -
element ui设置头部第一行的背景颜色
html部分<el-table :data="tableData" border style="width: 100%" :header-cell-style="getRowClass">方法//设置表格第一行的颜色getRowClass({ row, column, rowIndex, columnIndex }) { if (rowIndex == 0) { r...原创 2018-06-22 19:01:47 · 16294 阅读 · 6 评论 -
element ui表单验证select既获取label又获取value
html部分<el-form-item label="所属公司" prop="comName"> <el-select v-model="ruleForm.comName" placeholder="请选择所属公司" @change="selectGet"> <el-option v-for="item in ruleForm....原创 2018-06-28 19:32:29 · 7980 阅读 · 1 评论 -
vue v-for循环回来的数据动态绑定id
原创 2018-07-17 15:18:06 · 4231 阅读 · 0 评论 -
vue项目中添加修改提交的数据公用,主要利用对象合并以及往对象中添加一项
一般在vue项目中,添加跟修改所有的内容基本上是一样的,所以就可以写一个对象公用,只是添加的时候需要传入创建人(cName)修改则需要传入修改人(mName),我们可以利用对象合并以及向对象中添加某一跳数据 ,下边的公用数据都是我在data里边定义好的//这是添加和修改公用的数据 let obj = { pId:this.ruleForm.pName, pName:c...原创 2018-07-04 17:35:15 · 1137 阅读 · 0 评论 -
element ui的表单验证
首先这个是我一些常用的表单验证我整理的一份/*大于0小于100数字*/export function validateNumber(val) { const reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/; return reg.test(val) ...原创 2018-07-06 19:11:08 · 1594 阅读 · 0 评论 -
element ui数据转换,比如后端返回的1代表男,2代表女,在表格中显示男女
//数据转换 formatRole: function(row, column) { return row.ud_status == '1' ? "男" : row.ud_status == '2' ? "女" : "aaa"; }, 在html部分绑定一下 <el-table-column prop=...原创 2018-07-06 19:19:16 · 13721 阅读 · 5 评论 -
element ui表格显示图片
那个api是我接口的前缀地址 comImage是接口返回的数据 <el-table-column prop="comImage" label="公司Logo" align="center" width="150px" padding="0px" :show-overflow-tooltip = "true"> <原创 2018-07-06 19:25:48 · 12123 阅读 · 15 评论 -
element ui点击事件不生效
@click这样是不生效@click.native<el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> &原创 2018-07-06 20:15:46 · 7550 阅读 · 2 评论 -
在main.js里导入并使用vue-resource
// main.js // 导入Vue,这个是必需的,在使用Vue之前,必须先导入 import Vue from 'vue' // 导入 vue-router,并使用 import VueRouter from 'vue-router' Vue.use(VueRouter) // 导入 vue-resource,并使用 import VueResou...转载 2018-04-13 10:28:15 · 1700 阅读 · 0 评论