Vue
文章平均质量分 62
suiersuier
好记性不如烂笔头,总是记不住的记录下来方便以后用时查阅
展开
-
vue+element-ui 树形table
使用vue+element-ui +el-table 实现带树形的表格实现效果图实现方式:1.table标签中增加 row-key="rowKey"default-expand-all其中 row-key是接口中返回的一个属性,最好是不重复,重复后会导致有些地方点击折叠和展开出现问题,row-key使用属性必须有值不能为空,否则会一直报错row-key is requireddefault-expand-all 表示默认全部展开<el-table:data="...原创 2021-04-27 14:46:19 · 3320 阅读 · 2 评论 -
vue中不要element-ui时实现table的各列排序根据数组决定实现方法
昨天写了一篇table表格的各列根据数组决定排序的文章,但是有人不使用element-ui,现在写一下原始的table表格实现此功能问题说明:用数组fileds决定各列的展示顺序,比如说fileds=[{key:"name",value:"姓名"},{key:"address",value:"地址"},{key:"sex",value:"性别"},{key...原创 2020-07-08 17:29:40 · 809 阅读 · 0 评论 -
vue中实现过滤器:页面中接口返回的数据中部分数据需要进一步处理展示时可用过滤器进行处理
在做页面列表时,有时候接口返回的数据都是一些数字类型来标记是哪些类型,比如说经常用的0表示性别男,1表示性别女,但是到页面上展示时需要转化为汉字"男" 和 "女"进行展示,现在记录一下使用过滤器实现转化的过程,代码说明:例子中写了两个过滤器 一个获取会员级别名称的过滤器 一个判断是否有开店资格的过滤器,写两个是为了展示过滤器需要多个参数时的写法过滤器getViplevel 有一个参数level 使用时第一个参数是放在管道符|前边的,后边没有参数了方法名后边就不再跟东西了过滤器getIsC..原创 2020-07-07 17:42:22 · 1876 阅读 · 0 评论 -
vue中实现列表的每列位置由一个数组决定
今天一个朋友问我想实现一个table表格的各列顺序由一个数组决定怎么实现,其实既然是有数组决定的就把数组循环出来就可以了,原来的prop和label属性换成动态绑定数组中的值就可以了代码如下<template> <div class="list"> <el-table :data="tableData" style="width: 100%"> <el-table-column :prop='col.key'原创 2020-07-07 17:06:21 · 434 阅读 · 0 评论 -
vue中实现img设置src路径为本地图片
在vue项目中有时候img标签中引入的图片是本地图片,直接写src路径貌似根本加载不到,现在把解决方法记录一下。vue中引入本地路径时可以使用数据的形式进行引入,先提前把图片引入到当前vue文件中,在绑定到img的src属性上,代码如下 <div class="searchbox"> <span class="icon-search"><img :src="images.searchpng" alt="">&原创 2020-07-01 17:53:22 · 8741 阅读 · 0 评论 -
vue中实现一个搜索框的组件
在前端开发中有些东西就会经常反复使用,这样的东西抽取成组件比较合适,最近工作中遇到一个搜索楼盘的页面需要反复多次使用,抽取成了组件,现在记录一下1.创建一个searchcom.vue文件2.文件中填入一下代码,具体内容在代码后边进行解释<template><div> <header class="page-header"> <div class="searchwrap border-bottom">原创 2020-07-01 17:33:49 · 12596 阅读 · 0 评论 -
mt-loadmore实现上拉加载更多,下拉刷新碰到的坑:页面刚加载时总是会触发bottom-method方法的解决方案
做一个移动端页面时要实现一个列表的页面,使用的mt-loadmore实现的,但是发现一个问题:页面刚进来时总是会执行自发的触发bottom-method的事件,当列表里数据不止一页时页面就会向下滚动一点,导致刚进入页面看到的内容不是从最顶端的开始,想要的效果是这样,页面刚一进来加载第一页内容展示从页面顶端开始展示但实际除了正常加载第一页外,自发的触发了bottom-method的方法多加载了一页,而且页面自发的向下进行了滚动成了以下这个样子,顶部的黄色说明部分被遮盖了一部分解决办法是在<mt-原创 2020-07-01 14:09:03 · 971 阅读 · 0 评论 -
常用插件的官方地址
随时用到的地址随时补充到这里Mint-UI 官方地址:http://mint-ui.github.io/#!/zh-cn原创 2020-07-01 11:20:49 · 242 阅读 · 0 评论 -
使用mockjs生成数据规则
1.不使用占位符2.使用占位符原创 2020-03-23 21:50:11 · 738 阅读 · 0 评论 -
vue-cli的安装并使用vuie-cli创建项目
1.借助npm进行安装vue-clinpm install -g @vue/cli安装完成会回在npm的文件下生成vue.cmd文件此时表示安装成功。安装成功后需要配置环境变量才能使用vue-cli将vue.cmd的路径配置到环境变量中,我的电脑右键属性打开环境变量,找到系统变量中的path,点击编辑输入一个分号并把vue.cmd的路径粘贴进去即可点击确定,然后...原创 2020-03-18 22:05:30 · 294 阅读 · 0 评论 -
webpack资源打包入门,包含对css和图片文件打包和实时加载
1.css-loader打包css文件(1).需要安装模块style-loader 和css-loadernpm install --save-dev style-loader css-loader官方地址:https://www.webpackjs.com/guides/asset-management/#%E5%8A%A0%E8%BD%BD-css(2)配置webpack.co...原创 2020-03-03 22:24:53 · 302 阅读 · 0 评论 -
ES6语法中的导出和导出export/import
ES6语法的导出和导入默认成员和非默认成员学习笔记1.ES6语法中使用export导出成员或者函数,对应的导入时需要使用import2.export导出默认函数和默认成员时一个模块(通常是一个js文件)只能有一个默认成员或者默认函数(1)//导出默认函数exportdefaultfunction(){console.log("这是ES6语法111");}对应...原创 2020-03-01 22:33:04 · 1833 阅读 · 0 评论 -
webpack基础入门
使用webpack打包的基础入门学习笔记1.webpack安装时最好不要安装全局的,而是本地安装,因为项目如果转移到其他电脑上打包时可能不同的电脑安装的全局的webpack版本不同,可能会影响打包结果或者不能打包,安装在本地,换到其他电脑时就会使用相同版本的webpack2.本地安装webpacknpm install webpack@4.35.2 不加版本号时会安装最新版本的np...原创 2020-02-29 23:59:37 · 158 阅读 · 0 评论 -
vue的简单入门项目
1.给项目创建一个文件夹用VSCode打开文件夹,然后添加一个helloword.html文件,按!+Tab生成html页面模板,然后打开控制台用指令npm install vue@2.6.10 安装vue.js3.安装好后在helloword.html中引入刚刚安装的vue.js4.双大括号{{}} 是直接绑定data中的数据5.v-once是一次性绑定,绑定之后哦数据再变化时对应的...原创 2020-02-23 19:57:41 · 404 阅读 · 0 评论 -
VSCode常用插件和快捷键
1. VSCode的常用插件 (1)open in browser 按下alt+B使用默认浏览器打开当前html页面或者使用shift+alt+B选择其他浏览器 (2)vue 2Sinppets (3)Vetur 语法高亮,智能感知 (4)Auto Rename Tag 自动完成另一侧标签的同步修改 (5)Path Intellisense 自动补全...原创 2020-02-23 15:15:26 · 306 阅读 · 0 评论 -
npm常用命令
1. 安装node.js时会把npm一起安装上,无须单独安装npm,node.js的安装包中集成了npm的安装2. node -v 查看node.js的安装版本,也可用此来判断node.js是否安装成功3. npm -v 查看npm是否安装成功和npm的版本4. npm init 使用npm创建项目(也叫初始化项目) (1)npm init初始化项目时项目名称中不能含有大...原创 2020-02-23 15:02:52 · 412 阅读 · 0 评论 -
vue.js中跳转页面写法
跳转时打开新窗口方式:letrouteData=this.$router.resolve({path:'/esf/saleOrderManagePrivitelyOwend'});window.open(routeData.href,'_blank');跳转时不打开新窗口方式:this.$router.push({path:'/esf/saleOrderManag...原创 2019-10-11 15:21:06 · 839 阅读 · 0 评论 -
Vue中让文本框获取焦点
Vue写的页面中使用指令获取焦点后会出现一种显现,不论点击哪里都会让那一个input获取焦点,所以不要使用指令来写使用如下代码放到你要获取焦点的地方即可获取焦点,其中searchTxt是要获取焦点的ref的名称this.$nextTick((x)=>{ //正确写法 this.$refs.searchTxt.focus();})页面写法js中方法页...原创 2019-07-30 19:06:29 · 11274 阅读 · 0 评论