el-table前端分页

  • 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。
  • 后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据
  • tableData.slice((currentPage-1)_PageSize,currentPage_PageSize) 这是重点
  1. <template>
  2.  <div class="app">    
  3.      <!-- 将获取到的数据进行计算 -->   
  4.      <el-table :data="tableData.slice((pageData.pageNum-1)*pageData.pageSize,pageData.pageNum*pageData.pageSize)"> //对数据请求的处理，最为重要的一句话
  5.          <el-table-column prop="date" label="日期" width="180"></el-table-column>
  6.          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  7.          <el-table-column prop="address" label="地址"></el-table-column>
  8.      </el-table>
  9.       <div class="tabListPage">
  10.            <el-pagination
  11.                 :page-size="pageData.pageSize"
  12.                 :page-sizes="[10, 20, 50, 100]"
  13.                 layout="total, sizes, prev, pager, next, jumper"
  14.                 :current-page="pageData.pageNum"
  15.                 :total="pageData.total"
  16.                 @current-change="handleCurrentChange"
  17.                 @size-change="handleSizeChange"
  18.          />
  19.        </div>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24.    data(){
  25.        return {
  26.             // 总数据
  27.            tableData:[],
  28.            // 默认显示第几页
  29.             pageData:{
  30.                pageNum: 1,
  31.                pageSize: 10,
  32.                total:0
  33.            },
  34.        }
  35.    },
  36. mounted(){
  37.        this.getList();
  38.  },
  39.  methods:{
  40.        getList(){
  41.             this.tableData = res.data;
  42.             this.pageData.total= res.data.length
  43.          },
  44.        // 分页
  45.         // 每页显示的条数
  46.        handleSizeChange(pageSize) {
  47.            // 改变每页显示的条数 
  48.            this.pageData.pageSize= pageSize
  49.            // 注意：在改变每页显示的条数时，要将页码显示到第一页
  50.            this.pageData.pageNum= 1
  51.        },
  52.          // 显示第几页
  53.        handleCurrentChange(currentPage) {
  54.            // 改变默认的页数
  55.            this.pageData.pageNum = currentPage
  56.        },
  57.    },
  58. }
  59. </script>

表格跨分页多选

  • 看到项目里有小伙伴手动添加代码去处理这个问题，其实根据文档，只需加上row-key和reserve-selection即可
    1. <el-table row-key="id">
    2. <el-table-column type="selection" reserve-selection></el-table-column>
    3. </el-table>

表格内容超出省略

  • 只要加个show-overflow-tooltip就可以了，还自带tooltip效果

    1. <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip>
    2. </el-table-column>

    表头筛选

  • 前端筛选

  1.  <el-table-column
  2.          align="center"
  3.          prop="state"
  4.          label="状态"
  5.          min-width="30"
  6.          :filters="[{ text: '未完成', value: 0 },{ text: '已完成', value: 1 }]"
  7.          :filter-method="filterState"
  8.          filter-placement="bottom-end"
  9.  >
  10.      <template slot-scope="scope">
  11.          <span v-html="getStatus(scope.row.state)" />
  12.      </template>
  13.  </el-table-column>
  14.  <script>
  15.      export default {
  16.         data(){
  17.             return{
  19.             }
  20.         },
  21.         methods:{
  22.           //表头状态筛选
  23.           filterState(value, row) {
  24.              return row.state === value
  25.           },
  26.         }
  27.     }
  28. </script>
  • 后端筛选需要在el-table加上filter-change事件
  • 后端排序需要在el-table加上sort-change事件
  1.  <el-table
  2.          border
  3.          :data="tableData"
  4.          v-loading="listLoading"
  5.          @selection-change="handleSelectionChange"
  6.          :header-cell-style="{background:'#fafafa',color:'#252525','text-align':'center'}"
  7.          @sort-change="sortChange"
  8.          @filter-change="filterChange"
  9.  ></el-table>
  10.  <script>
  11.      export default {
  12.         data(){
  13.             return{
  14.                 queryItem:{}
  15.             }
  16.         },
  17.         methods:{
  18.             // column 的 key
  19.             filterChange(column){
  20.                 this.pageData.pageNum = 1;
  21.                 do...
  22.                 this.getList();
  23.             },
  24.             // 监听创建时间排序的方法
  25.             sortChange(column) { 
  26.                 switch (column.prop) {
  27.                     case 'createTime':
  28.                         //ascending 升序 descending 降序
  29.                         if (column.order === 'ascending') {
  30.                              this.queryItem.createTimeDesc = 0;
  31.                         }
  32.                         if (column.order === 'descending') {
  33.                             this.queryItem.createTimeDesc = 1;
  34.                         }
  35.                         this.getList();
  36.                         break;
  37.                     default:
  38.                         break
  39.                 }
  40.             },
  41.         }
  42.     }
  43. </script>

表格数据formatter

  1. <el-table-column
  2.   prop="workTypeCode"
  3.   label="身份证类型"
  4.   :formatter="idCardTypes"
  5.   align="center">
  6. </el-table-column>
  7. <el-table-column
  8.   prop="type"
  9.   label="类型"
  10.   :formatter="formatterType"
  11.   align="center">
  12. </el-table-column>
  13.  <script>
  14.      export default {
  15.         data(){
  16.             return{
  17.                 idCardTypeList:[]//身份证类型数据列表
  18.             }
  19.         },
  20.         methods:{
  21.            //有固定的数组列表
  22.            idCardTypes(row, column, cellValue, index) {
  23.               if (cellValue) {
  24.                 for (var i = 0; i < this.idCardTypeList.length; i++) {
  25.                   if (cellValue == this.idCardTypeList[i].code) {
  26.                     return this.idCardTypeList[i].name;
  27.                   }
  28.                 }
  29.               } else {
  30.                 return "--";
  31.               }
  32.               //单一值判断
  33.               formatterType(row, column, cellValue){
  34.                 if (row.type == 1 ) {
  35.                     return'离线'
  36.                 }else{
  37.                     return'--'
  38.                 }
  39.             },
  40.            },
  41.         }
  42.     }
  43. </script>

表格数据自定义dom

  1.   <el-table-column
  2.           align="center"
  3.           prop="state"
  4.           label="状态"
  5.           min-width="30"
  6.   >
  7.       <template slot-scope="scope">
  8.           <span v-html="getStatus(scope.row.state)" />
  9.       </template>
  10.   </el-table-column>
  11.  <script>
  12.      export default {
  13.         data(){
  14.             return{
  16.             }
  17.         },
  18.         methods:{
  19.              getStatus(status) {
  20.                     if (status == 0) {
  21.                         return `<div  style="display: flex;align-items: center;justify-content: center">
  22.                             <i class="c_" style="background: #EC7F30"></i>
  23.                             <span>未发送</span>
  24.                         </div>`
  25.                     }
  26.                     if (status == 1) {
  27.                         return `<div  style="display: flex;align-items: center;justify-content: center">
  28.                             <i class="c_" style="background: #4D89FF"></i>
  29.                             <span>发送中</span>
  30.                         </div>`
  31.                     }
  32.                     if (status == 2) {
  33.                         return `<div  style="display: flex;align-items: center;justify-content: center">
  34.                             <i class="c_" style="background: #67C23A"></i>
  35.                             <span>接收成功</span>
  36.                         </div>`
  37.                     }
  38.                     if (status == 3) {
  39.                         return `<div  style="display: flex;align-items: center;justify-content: center">
  40.                             <i class="c_" style="background: #EB1A18"></i>
  41.                             <span>接收失败</span>
  42.                         </div>` 
  43.                     }
  44.              },
  45.         }
  46.     }
  47. </script>   
  48. <style>
  49.     .c_ {
  50.         width: 7px;
  51.         height: 7px;
  52.         display: block;
  53.         margin-right: 5px;
  54.         margin-top: 3px;
  55.         border-radius: 50%;
  56.     }
  57. </style>

表格单选多选

  • 单选
  1.  <el-table
  2.     ref="singleTable"
  3.     :data="tableData"
  4.     highlight-current-row
  5.     @current-change="handleCurrentChange"
  6.     style="width: 100%">
  7.     <el-table-column
  8.       type="index"
  9.       width="50">
  10.     </el-table-column>
  11.   </el-table>
  12.  <script>
  13.      export default {
  14.         data(){
  15.             return{
  16.                 currentRow:'',//单选数据
  17.             }
  18.         },
  19.         methods:{
  20.             handleCurrentChange(val) {
  21.                  this.currentRow = val;
  22.             }
  23.         }
  24.     }
  25. </script>
  1.  <el-table
  2.    :data="tableData"
  3.    v-loading="listLoading"
  4.    @selection-change="selsChange"
  5.    highlight-current-row
  6.    style="width: 100%"
  7.  >
  8.     <el-table-column
  9.       type="index"
  10.       width="50">
  11.     </el-table-column>
  12.  </el-table>
  13.  <script>
  14.      export default {
  15.         data(){
  16.             return{
  17.                 tableData:[],
  18.                 selectData:[]//多选数据
  19.             }
  20.         },
  21.         methods:{
  22.              //选择表格列的时候会把数据放到一个数组里 多选
  23.              selsChange: function (val) {
  24.                this.selectData = val;
  25.              },
  26.         }
  27.     }
  28. </script>

表尾合计行

  • 若表格展示的是各类数字，可以在表尾显示各列的合计。
  • 将show-summary设置为true就会在表格尾部展示合计行
  • 使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，
  1. <el-table
  2.     :data="tableData"
  3.     border
  4.     show-summary
  5.     :summary-method="getSummaries"
  6.     style="width: 100%">
  7. </table>
  8.  <script>
  9.      export default {
  10.         data(){
  11.             return{
  12.                 tableData:[],
  13.                 selectData:[]//多选数据
  14.             }
  15.         },
  16.         methods:{
  17.               getSummaries(param) {
  18.                   const { columns, data } = param;
  19.                   const sums = [];
  20.                   columns.forEach((column, index) => {
  21.                       const values = data.map(item => Number(item[column.property]));
  22.                       if (!values.every(value => isNaN(value))) {
  23.                           sums[index] = values.reduce((prev, curr) => {
  24.                               const value = Number(curr);
  25.                               if (!isNaN(value)) {
  26.                                   return prev + curr;
  27.                               } else {
  28.                                   return prev;
  29.                               }
  30.                           }, 0);
  31.                           sums[index]  = sums[index].toFixed(2);
  32.                       } else {
  33.                           sums[index] = ' ';
  34.                       }
  35.                       if (index === 0) {
  36.                           sums[index] = '总价';
  37.                           return;
  38.                       }
  39.                       if (index === 6) {
  40.                           sums[6] = (sums[5]/sums[2]*100).toFixed(2);
  41.                           return;
  42.                       }
  43.                       if (index === 8) {
  44.                           sums[8] =( sums[7]/sums[4]*100).toFixed(2);
  45.                           return;
  46.                       }
  47.                       if (index === 10) {
  48.                           sums[10] =( sums[9]/sums[5]*100).toFixed(2);
  49.                           return;
  50.                       }
  51.                       if (index === 12) {
  52.                           sums[12] =( sums[11]/sums[7]*100).toFixed(2);
  53.                           return;
  54.                       }
  55.                   });
  56.                   return sums;
  57.               },
  58.         }
  59.     }
  60. </script>

添加自定义的暂无数据

  1. <el-table :data="tableData">
  2.     <template slot="empty">
  3.         <div class="empty-table">
  4.             <img style="width: 160px;" class="data-pic" src="../../assets/images/noData.png" alt="" />
  5.             <div>暂无数据</div>
  6.         </div>
  7.     </template>
  8.     <el-table-column
  9.             type="index"
  10.             width="60"
  11.             align="center"
  12.             label="序号"
  13.     />
  14. </el-table>