![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
elementui
_小郑有点困了
我的月亮永悬不落。
展开
-
el-cascader多层级联点击动态加载子级
区划级联,例如从全国各省->市->县->乡->村,五级结构,那么如果通过一个接口数据量势必太大了。可能会出现接口请求慢的情况,所以就需要点击父级再去请求下一级这样一个实现思路。element的el-cascader 是提供了动态加载方法。原创 2022-11-24 16:09:59 · 1144 阅读 · 2 评论 -
vue重写elementUi的message,全局重写部分参数
场景使用element的时候通常是全局main.js引入,然后每次使用调用不同类型,但是如果你想全局每次调用的时间都缩短。那么就得全局引入的时候重写一下常规引用// Vue.prototype.$message = Message重写Vue.prototype.$message=function(msg){ msg.type= msg.type=='error' ? 'warning':msg.type; Message(msg)}let messagearr=['success原创 2022-03-03 16:04:38 · 1341 阅读 · 0 评论 -
el-table表格实现单选
当你想要列表可选且只能选中一条的时候,你需要做:1,隐藏表头全选checkBox2,实现单选html:<el-table border :key="4" height="450px" @select="simpleCheck" @selection-change="handleSelectionChange" ref="tableMain" :data="GETParkingOrderReport.output.value.row.原创 2021-11-23 14:42:47 · 2778 阅读 · 0 评论 -
element表格默认排序会影响vue生命周期内的时间调用(日常工作小记)
element表格默认排序会影响vue生命周期内的时间调用(日常工作小记)因为多个页面共用一个全局属性,那么采取存入内存的方案,但是有时候会出现一种情况,A页面会进行跳转至B页面,跳转之前会进行更改内存。(当然,B页面会读取内存,在created或mounted进行接口请求)。那么就发现了问题。假如:A跳转B,跳转的同时/之前进行更改内存,那么你猜B页面出现的瞬间,你在生命周期监听路由传参,B页面同一个接口会调用几次?答案:至少两次。默认排序触发的接口请求会快于任何生命周期,但是无论怎么快打开F原创 2021-11-18 14:12:18 · 331 阅读 · 0 评论 -
element时间范围选择器使用方式,不同于日期选择器
element时间范围选择器使用,区别于日期选择器的用法背景:项目需要选择时间段,但是一看element的选择器,文档寥寥数字,就介绍怎么设置参数了,但是至于怎么接收数据,就没有提到了,有点烦。见代码。效果图:代码实现:<el-time-picker is-range v-model="serviceTime.input.time" range-separator="至" start-placeholder="开始时间" end-placeholder="原创 2021-08-26 15:25:35 · 674 阅读 · 0 评论 -
el-button禁用模式下悬停显示信息
el-button禁用模式下悬停显示信息背景:一个按钮如果被禁用掉了,可能用户会有些奇怪,咋回事呀,不给我点?为啥不给我点啊?总得阐述一下原因呀?于是乎就出现了这个问题,正常的用el-tooltips是没有效果的。得这样子写。效果图:代码实现:<el-tooltip placement="top" :content="scope.row.isRelation?'该设备存在已关联订单,可禁用不可删除':''"> <div style="margin:0 10px">原创 2021-08-24 09:58:07 · 1983 阅读 · 3 评论 -
实现el-table的selection某些行不可选中
实现el-table的selection某些行不可选中背景:有些行不可做批量操作,那直接不给他选就行了呀。效果图:代码实现:<el-table-column type="selection" :selectable="checkSelect" width="35"></el-table-column>//判断是否可选 checkSelect (row,index) { let isChecked = true; if (row.isRelati原创 2021-08-24 09:31:58 · 2134 阅读 · 0 评论 -
日常工作小笔记---js将Object显示为正确的结构(增强可读性)
js将Object显示为正确的结构(增强可读性)效果:需求背景:例如你的项目有一个界面展示了所有的接口日志,那么这个无疑问是助你排查问题的利器,这个界面最好的展现形式就是表格,但是想要看入参回参怎么才能好看一些呢,表格完全显示肯定是不美观的,而且也不好看,这里就用了element表格的tooltip组件,但是这个显示的JSON内容做了个格式化处理示例代码:1.后端数据返回形式----对象{ callBackID: null, datas: [原创 2021-07-09 09:49:58 · 319 阅读 · 1 评论 -
vue使用el-tabs实现标签页(内存+vuex)
vue使用el-tabs实现标签页(内存+vuex)效果图:1:2:3:内存中这是一个组件,例如:pageTabs.vue(组件是可以做到独立监听路由变化的,所以不需要外部调用什么内部的方法,所以可以抽离成为一个组件),监听路由改变进行新增标签,以及el-tabs组件的切换,删除代码:<template> <div class="page-tabs-index"> <el-tabs v-model="activeRoute" type="card原创 2021-05-10 16:17:50 · 4127 阅读 · 3 评论 -
elementui表格表头宽屏错位
elementui表格表头宽屏错位/* 保证表格缩放不错位 */ body .el-table th.gutter{ display: table-cell!important; }原创 2021-02-25 16:37:26 · 138 阅读 · 0 评论 -
element移除表单验证项
element移除表单验证项移除某项this.$refs['form'].clearValidate(['adminAcc']);移除所有this.$refs['form'].clearValidate();原创 2021-02-25 14:41:37 · 1737 阅读 · 0 评论