在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下 2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的 根据项目需求，这...
城市多选组件 最近收到了一个需求，管理系统需要上线一个活动，但是活动是根据地区上线的，最小范围到市，于是有了下面这个组件页面展示如图：上代码～～～ <template><div class="tm-mil-city"><p class="tm-mil-city-title tm-mil-mb20">{{name}}</p><div class="tm-mil-district-box tm-mil-mb20"><Select class="tm-mil-selsect" style=width:200px v-model=province placeholder=全部 @on-change=changeProvince><Option v-fo...
首先，v-model的值为当前被选中的el-option的 value 属性值 需求：进入编辑页面，状态栏默认选中生效，如下显示：html部分代码： <el-form-item label="状态"><el-select v-model="form.status" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select> </el-form-item>data的form中定义status属性：再看data中options的定义，options为选择框中...
前言 element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。 在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。1.表格样式问题：混乱样式.png正常样式.png 如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢...
本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考，具体如下： elementui是有checkbox组件，不过问题在于checkbox组件内只能嵌套简单的字符串，如果要嵌入标签怎么办? 首先渲染页面： <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in orderData"><tr><td class="order-num" colspan="7"><el-checkbox v-model="item.checkModel" @change="handleChec...
先看看ElementUI里关于el-table的template数据结构： <template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template> 再看看ElementUI里关于el-table的data数据结构： <script>export default {da...
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el-tableempty-text="正在加载中...":data="contentList"style="width: 100%"@sort-change="sort"class="pro-table-item"tooltip-effect="dark" ><template v-for="(item,index) in titleList"><el-table-columnv-if="index == 0":prop="index.toString()":label="item"sortable="custom"min-width...
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： <template><el-table:data="tableData3"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column></el-table> </template>其中height="250"是固定值，我们可以...
环境要求 Nodejs Nodejs 官网下载地址：http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行，输入npm -v，如果出现如下图的显示，说明已经安装正确。如果安装版本比较老，想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli -g淘宝镜像 npm使用的国外中央仓库，下载速度较慢，有的时候还会有...
最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！ 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ，基于此封装了一些 可复用的代码。 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 。双剑合璧 天下无...
只读：readonly在data里定义：readonly: true, 然后在input框里加上readonly就可以了。禁用：disabled在data里定义：edit: true, 然后在input框里加上：:disabled="edit"就可以了PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta h...
问题： IE9中无法使用FormData思路 基于上面的问题，需要使用form表单上传文件form表单上传会引起页面的刷新，因此需要动态添加一个iframe来避免页面刷新from表单上传之后需要调用回调，此时需要监听iframe的onload事件坑 文件上传之后的返回值 Content-Type值不能是application/json 这会导致IE去解析返回结果，最终调用文件的保存或者打开，此处需要与后端协商将Content-Type改为text/plain如果需要图片回显，回显的图片路径中有...
1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中，然后点击更多项目中的编辑项目2.修改前缀为el-icon-xxx，xxx自定义，然后将项目下载自本地3.将这5个文件放入到项目文件中，将iconfont.css引入到Vue项目中， 然后修改iconfont.css的.iconfont处，将其修改为下图所示4.修改iconfont.css后，大致如下图所示5.最后就可以采用icon相同方式引入图标，如下图方式引用即可注意：如果修改前缀为el-icon引入，可能会导致与...
在我们引入elementUI的时候，一般是两种方式：npm安装或者在script直接引入；当然，在script直接引入的时候，我们也可以通过直接指定版本的方式，达到锁定版本的效果。 <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>直接引入是从外网引入，每次加载都是读取外部网站，我们大部分开发者可能使用的是npm安装的方式，采用这种方式引入的时候，elementUI会保存在vue项目下的node_modules文件夹中，找到element-u...
前言 公司系统在用elementui做后台开发，不免遇到一些需要自己去根据原有的功能上，加一些交互的功能。 今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程，东西听上去很简单，但就是越简单的东西越容易出一些问题。官方tag文档：elementUi-tag标签 效果图：思路 一、多选框勾选，出现对应的tag:1.利用watch监听多选框绑定的值A(数组)的变化； 2.根据A的变化,循环拿到勾选多选框的id对应的name，将id以及对应的name组成新...