JCat的博客

为什么我要写这个博客？因为记录一下平时怎么偷懒写代码~~不然怕忘了；其实主要为了记录全局注册组件的方法，在项目中就不用单页面调用了，需要的地方直接用，整理了一下vue+element中常用的分页组件封装和上传组件封装；

前言很久没有写博客了，总结一下前几天遇到的一个需求中的知识点吧，element 中的Popover提示框在表格或ul页面中如何循环使用；在用Popover提示的时候遇见了几个问题，记录一下；正文一、解析官方popover的使用方法官网：element-popover <el-popover placement="bottom" title="标题" wid...

实际项目中，为了精简代码，会涉及到在同一个表单中同时完成 查看编辑 新增等功能，此篇解决：1. 编辑的时候，明明给页面回显赋值了，但是校验非空却没有通过的问题。2. 表单刚一进页面就校验非空，显示红色提示的问题。3.常规表单关于校验的规则。

前言刚好项目里面一直在使用的都是element，因为原生的滚动条太丑了，发现elementui中有个隐藏的组件，优化滚动条样式。亲测可用，鼠标经过的时候才会显示，简单美观。正文首先全局引入element，import ElementUI from 'element-ui';简单使用–只是用竖的滚动条只是用竖的滚动条，外层box设置宽高，内层的内容充满，设置el-scrollbar的高度...

问题描述：在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。（踩坑踩得莫名其妙）代码段：&lt;el-select v-model="value" placeholder="请选择" @change="change()"&gt; &lt;el-opti...

vue-cli项目中—根据路由变换的动态面包屑导航1、在src文件夹下的router/index.js中配置路由配置对应的路由import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/',...

前言element的表单验证，实际项目中有部分表单数据是固定的，验证方式参考官网。也有很大一部分表单数据的label是从后台取得数据，在这种情况下验证方式就不同，也是此文所述。正文后台数据常规验证（label，prop确定）官网表单校验部分 http://element-cn.eleme.io/#/zh-CN/component/form后台数据，label prop不确定，in...

前言后台系统都是各种表格表单编辑，整理了下常见的几种实现表格编辑的方式，希望有用。使用框架：vue+element正文简单表格行内内部可编辑，原理就是span 和 input 的切换显隐。代码：<template> <div> <el-table :data="tabledatas" border> ...

前言上一篇写了简单的表格编辑功能 这里整理了一下常见的表格功能。主要功能 ：批量的新增，复制，删除，修改，保存，和逐条的功能。针对新手前端小白还挺有用的~正文首先是表格的数据展示使用的是el-table 绑定数据源 :data="tabledatas",在script的data中挂载tabledatas,在created中发请求赋值，增加属性show来控制input的显隐。ma...

前言分页加表格很常见，基本实现：前台分页和后台分页。这里讲一下如何实现前台分页及搜索功能。基于vue和element，demo详见最后。正文页面布局<template> <div> <el-row> <el-col :span="6"> <el-inp...

前言上一篇写前台解决分页问题的时候没有这个问题，但是在实际项目后台中有遇到过，所以在这里专门说一下，如果参考前台分页出现这种问题了，也可以使用这种方法！bug：vue和element实现的后台分页，当前是第二页，点击搜索，强制设置current-page为1，但是当前页还是第二页没有改变。解决方法如何使用分页就不说了，可以参考上一篇的前台解决分页页面 el-pagination v-i...

element UI upload组件上传附件限制格式<el-upload class="upload-demo" action="url" accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF" :on-preview="handlePreview" :on-remove="hand...