elementUI小功能合集

前言

本文章主要更新elementUI使用过程中一些小需求的实现，遇到问题就会更新，欢迎大家探讨交流

一、elementui中el-table-column里显示两个后台字段

需求：<el-table-column></el-table-column>要展示的数据来自后台返回的两个字段
代码如下：

<el-table-column prop="specs,quantityUnit" label="规格">
      <template slot-scope="scope"> 
            {{scope.row.specs}}/{{scope.row.quantityUnit}} 
       </template>
 </el-table-column>

二、vue+elementui设置表格分页

需求：elementUI的表格能够分页，结合el-pagination使用
步骤：
    1.拿到后端传回的数据数组
    2.在data内定义页数、每页多少条数据这两个变量
    3.在el-table的data属性中通过slice函数分割数据
    4.根据官方的分页方法实现切换数据的效果
代码如下： 

//在data中注册使用的数据
data:function(){ 
    return { 
    total:0,//默认数据总数(也可由数据数组长度) 
    pagesize:7,//每页的数据条数 
    currentPage:1,//默认开始页面 } }
//将数据绑定到el-table上
<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)">

三、vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格

需求：