Element ui
文章平均质量分 89
element ui 在使用中遇到的问题
G_D_Q
这个作者很懒,什么都没留下…
展开
-
Element ui表格导出Excel的全部数据
Element ui表格导出Excel的全部数据之前导出Excel表格只能将当前页导出到Excel,如果表格有分页则十分不方便。这是一个相对简单地实现方法。一、第一步先安装3个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader二、在项目中新建一个文件夹(名字自取,这里命名excel),然后在文件夹中放入Blob.js 和 Export2Excel.js 两个文件。链接地址:https:/原创 2020-06-18 14:40:24 · 5282 阅读 · 12 评论 -
Element ui表格导出Excel
Element ui表格导出Excel首先安装依赖项:npm install -S file-saver xlsx或者是以下命令,这两个命令一样。npm install --save xlsx file-saverfile-saver:保存文件xlsx:电子表格解析器首先我们有一个表格,并给表格一个id。<el-table :data="meterList" style="width: 100%" border id="listname"> <el-t原创 2020-06-18 14:33:42 · 303 阅读 · 2 评论 -
Element ui全部数据前端排序
Element ui全部数据前端排序1.首先给el-table绑定sort-change监听<el-table ref="filterTable" :data="historyList.slice((pageNum-1)*pageSize,pageNum*pageSize)" @sort-change="sortChange">2.给需要排序的列设置sortable属性<el-table-column label="数据时间" prop="time" sortable='cust原创 2020-06-18 14:31:28 · 1915 阅读 · 2 评论 -
scope作用域插槽在table中用法
element-ui中slot-scope=“scope”在table应用中我们经常看到如下用法 <el-table :data="userlist" style="width: 100%" border >//:data 在此绑定数据源 <el-table-column type="index" label="编号"></el-table-col...原创 2020-03-05 16:24:18 · 1820 阅读 · 0 评论 -
Element ui表格隔行变色
官方文档给出一个stripe属性可以创建带斑马纹的表格<el-table :stripe="true"> </el-table> //可以这样写<el-table stripe"> </el-table> //可以直接这样写这样创建出来的表格也有隔行效果但是不明显。官方文档还给出了带状态的表格,通过row-class-name 属性来创建...原创 2020-04-28 09:12:38 · 11039 阅读 · 13 评论 -
Element ui表格高度自适应
element-ui表格高度自适应1.动态绑定table的高度值:height<el-table :data="List" :height='tableHeight' stripe border highlight-current-row>2.获取浏览器高度,并监听浏览器resize变化mounted () { getHeight() //增加监听事件,窗口变化时...原创 2020-04-27 17:14:03 · 7162 阅读 · 3 评论 -
Element ui轮播图自适应+Cannot read property ‘height’ of undefined报错处理
在element-ui中轮播图carousel组件容器的高度是固定写死的,想要达到自适应的效果 需要用:height 将高度动态绑定。特此声明:此方法是我在网上搜的并在其基础上做了一定改进,原文在此原文讲解的比较详细。所以我没有再做过多的赘述。并在最后加上了我遇到问题以及处理方法。1.template html代码<div class="boxdiv" > <...原创 2020-04-27 11:12:24 · 1791 阅读 · 0 评论 -
element表格分页
首先用到分页控件Pagination。<el-pagination @size-change="handleSizeChange" //pageSize 改变时会触发方法 @current-change="handleCurrentChange" //currentPage 改变时会触发方法 :current-page="pageNum" //当前页数,支持 ....原创 2020-04-17 11:02:39 · 336 阅读 · 0 评论 -
element表格中的数据处理
我们请求到的数据经常不是我们想要显示的最终结果,例如:我们想要显示的是XX年XX月XX日,但是返回的数据却是一串数字代替,或者我们想要显示“开“”关”,但是返回却是0,1。这种情况我们就需要对数据经行处理。用到表格的数据转换 formatter属性。<el-table-column label="开关状态" prop="data.tatus" :formatter=FunctionTatu...原创 2020-04-17 10:58:27 · 1401 阅读 · 2 评论