Element
芝麻油yy
这个作者很懒,什么都没留下…
展开
-
element-plus组件按需引入封装
element-plus组件按需引入封装原创 2022-12-18 17:46:46 · 417 阅读 · 0 评论 -
ElementUI实现按需加载组件
ElementUI实现按需加载组件原创 2022-08-22 21:40:01 · 1600 阅读 · 0 评论 -
基于node.js+MongoDB+elementui的分页功能更新优化
一、准备分页组件。1.1分页组件src-->components-->Pagination-->index.vue<template> <div class="pagination-container"> <el-pagination @current-change="paginationObj.handleCurrentChange" @size-change="paginationObj.handleS原创 2022-01-12 11:55:18 · 411 阅读 · 0 评论 -
基于node.js+MongoDB+elementui的分页接口以及页面实现
1.在准备分页之前,先搭好分页的组件。这里我已经提前实现了对elementui中分页组件的二次封装,如果想参考分页组件二次封装,详情请看如下链接ElementUI分页组件的封装_mingY的博客-CSDN博客2.准备好分页组件,可以看见如下样式:这里我已经使用elementui的全局样式对分页组件样式进行处理3.我使用的是mlab下面的mongo...原创 2022-01-10 15:01:23 · 700 阅读 · 0 评论 -
ElementUI如何将当前组件的所有属性快速传递给子组件
1.普通写法,对应的是一个一个元素的绑定<el-table border style="width='300px'" :data='tableData'> <el-table-column v-for="col in columns" :prop="col.prop" :key="col.prop" :label="col.label" :width="col.width">原创 2021-12-28 11:54:24 · 832 阅读 · 0 评论 -
ElementUI在el-table基础上进行导出.xls表格操作
1.截图2.导出按钮<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>3.导出方法this.downloadFile为全局挂载的方法/** 导出按钮操作 */ handleExport() { // 导出接口 exportHealthSubsidy(this.ids) .原创 2021-12-27 20:23:23 · 611 阅读 · 0 评论 -
ElementUI分页组件的封装
1.准备封装创建index.vue路径:src-->components-->Pagination-->index.vue<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage"原创 2021-12-27 19:25:31 · 221 阅读 · 0 评论 -
el-table中的:label使用变量换行
1.效果2.实现代码 <el-table-column prop="cprateDeposit" :label="'对公存款\n(万元)'" align="center"> </el-table-column>3.解析使用:label,并且使用\n换行;其中align 是使文字居中原创 2021-10-25 09:11:59 · 306 阅读 · 0 评论 -
ElementUI中分页Pagination 样式的修改(分页组件的封装)
1.实现效果:2.实现代码:<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"原创 2021-09-17 17:42:48 · 1563 阅读 · 0 评论 -
在ElementUI中改变el-table中的el-table-column样式
1.效果一览2.实现思想:使用作用域插槽:slot-scope="scope";绑定class类'back';v-if条件判断:如果scope.row.xh == 1,2,3 ,则给他绑定类,设置样式。不满足条件的则不绑定类,不设置样式。3.实现代码:html代码:<el-table-column prop="xh" label="序号" width="80" align="center"> <template slot-scope="...原创 2021-09-17 16:25:40 · 1847 阅读 · 0 评论 -
ElementUI改变el-table的表头颜色以及各行的颜色
1.实现效果2.实现代码<el-table :data="tableData" :header-cell-style="{ background: '#E5E9F4' }" :cell-style="{ color: '#5e708e' }">其中:header-cell-style="{ background: '#E5E9F4' }".原创 2021-09-09 18:05:30 · 2052 阅读 · 0 评论 -
点击input框,添加阴影效果
1.普通的input框设置: input:focus{} <input type="text"></input>style样式:input:focus{ //设置阴影效果 box-shadow: 0px 0px 12px 0px rgba(98, 19, 254, 0.6); //设置border效果 border: 2px solid #5813fe;}2.Elementui中的输入框设置: .el-in...原创 2021-09-01 14:02:35 · 3173 阅读 · 0 评论 -
el-table中合并行加入图标
代码:<el-table :data="tableData"> <el-table-column prop="classType" label="班型" width=""> <template slot-scope="scope"> <i v-if="scope.row.classType == '白班'" class="el-icon-sunny"></i> <i原创 2021-08-02 15:24:26 · 311 阅读 · 0 评论 -
element中el-image怎样显示图片
代码如下:<el-image style="width:100%;":src="require('../../../../assets/images/businessLicense.png')"></el-image>区别于普通的<img />标签<img style="width:100%;" src="../../../../assets/images/busin...原创 2021-07-28 11:49:49 · 1162 阅读 · 0 评论