随笔分类 - element-ui
一些使用element-ui的心得,方法
摘要：树形表格数据过多时,可以使用懒加载方式获取子级数据 githup源代码地址: https://github.com/shengbid/vue-demo/tree/master/src/views/Table/asyncTreeTable 完成效果: 先加载出父级数据, 点击折叠按钮请求子级数据 代码
阅读全文
摘要：之前写了一篇用el-tree实现可选择树形表格的博客 https://www.cnblogs.com/steamed-twisted-roll/p/10348471.html 最近再次有这种树形表格的需求,研究了下,发现用el-table本身支持的树形数据改造下也可以实现 两种方式都可以实现需求,这
阅读全文
摘要：做名称搜索时,根据输入关键词搜索,但是正常是一输入就会触发搜索,不合理 增加一个延时,减少频繁调用搜索 lodash这个组件库提供了很多实用的方法,其中就有debounce lodash官网 https://www.lodashjs.com/docs/lodash.debounce _.deboun
阅读全文
摘要：最近做项目,把原来的级联选择换成了element的 cascader级联选择组件,但是由于之前的组件传值赋值都是使用的选中的这级ID,而element的cascader返回的数据格式是父级ID与选择的ID一起,不想改动之前的数据格式,所以就自己处理了下数据,传给后台的数据好处理,只需要拿数组的最后一
阅读全文
摘要：有时候用element-ui el-cascader级联选择器添加分类时会遇到最多添加几级的限定.看了文档,只要给需要禁止选择的选项添加disabled属性就可以.但是使用一层一层循环遍历数据感觉很麻烦,自己写了个遍历的方法,纪录下,方便以后使用 贴代码 cascader.vue<template>
阅读全文
摘要：最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion包 npm i image-conversion --save template <template
阅读全文
摘要：在element分页中使用pager-count报错: vue.esm.js?c5de:628 [Vue warn]: Invalid prop: custom validator check failed for prop "pagerCount". found in > <ElPaginatio
阅读全文
摘要：项目使用vue脚手架自动生成的,vue版本为^2.5.16.项目中需要按需使用element-ui,根据element-ui的官方文档,一开始在babel.config.js文件中修改配置 module.exports = { presets: [ "@vue/app", ["es2015", {
阅读全文
摘要：表格组件的排序功能,点击排序表头可以进行升序和降序进行排序 页面代码,基本上排序的参数都使用了 <el-table :data="tableData" style="width: 100%" <!-- 数据由后台进行排序时sortable="custom",需要监听排序点击事件,会返回当前的prop
阅读全文
摘要：表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果 HTML: <div class="table_box"> <el-button type="primary" class="submit_btn" @click="addTable">添加<
阅读全文
摘要：在使用element表格合并后,发现鼠标只有移入第一个合并行时,合并的部分会高亮,移入其他行,不会高亮,这样效果看起来不是很好.查看了文档也没有直接的解决方法,就通过现有的方法处理了一下,解决了hover的问题 因为实际使用时,表格数据都是后台返回的,所以这里就只写一下后台动态返回的数据设置hove
阅读全文
摘要：element-UI里的table表格与多选框CheckBox的组合很常用,官网也给了很多参数,自己总结了一下,方便日后使用 本博客源码: https://github.com/shengbid/vue-demo 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个
阅读全文
摘要：最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 项目源码: https://github.com/shengbid/vue-demo 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使用表格的方式也可以勉强实现效果,但是在判断选择
阅读全文
摘要：最近在项目中使用element-UI的日期范围组件时遇到一个问题,相信很多人也做过这种场景,一个录入页面也同时是编辑页面,编辑的时候就需要先赋值.但是我给date组件赋值后,确无法操作了,change事件也触发不了,但是对应的值已经改变了,只是页面没改变,这真的是很神奇的bug.通过图片看下我遇到的
阅读全文
摘要：很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方法,比较简单 实现思路: 把当前要移除的产品唯一值(id)与原始数据进行比较,找到当前选中的数据在原
阅读全文
摘要：element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码
阅读全文
摘要：最近整理了一下,table表格的编辑状态,把一般表格里需要输入的类型都放进来了,实现的功能如图 这里面的input输入框没什么好说的,绑定对应的值就可以,要注意的是组件上传的upload,这个表格是有多个upload上传组件的,upload组件的文件列表是根据fileList展示的,所在在处理方法的
阅读全文
摘要：博客源码githup连接https://github.com/shengbid/vue-demo 最近做项目遇到一个需求,需要实现一个表格的单选,由于项目使用的是element-ui.于是去看了表格的文档,确实有单选的方法,但是官方的单选是直接选中表格行,通过颜色来区分 看着效果不明显,实际需要一个
阅读全文
摘要：之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示场景 本博客源码: https://github.com/shengbid/vue-d
阅读全文
摘要：多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多选框的数据类似只能在页面上渲染一次.先看一下我项目中遇到的情况: 页面渲染出来的效果是这样的,根据后
阅读全文