element-ui table组件封装(含分页,筛选,排序,操作等功能)

vue el-table组件已有功能的基础上集成了排序,筛选,分页等功能

tabel组件
<template>
  <div class="main-table">
    <div class="table-cont"
         :style="{ minHeight: height }">
      <el-table ref="multipleTable"
                v-loading="options.loading"
                :show-header="options.showHeader"
                :data="dataSource"
                class="table"
                :height="height"
                tooltip-effect="light"
                @selection-change="handleSelectionChange"
                @filter-change="handleFilterChange"
                @row-click="handleRowClick">
        <!-- 多选框 -->
        <el-table-column v-if="options.mutiSelect"
                         type="selection"
                         width="48"
                         align="center" />
        <!-- 序号 -->
        <el-table-column v-if="options.index"
                         label="序号"
                         type="index"
                         width="50"
                         align="center" />
        <!-- 数据列表 -->
        <el-table-column v-if="options.type"
                         width="50"
                         type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     class="demo-table-expand">
              <el-form-item v-for="item of typeList"
                            :label="item.name"
                            :key="item.id">
                <span>{
   {
    props.row[item.id]}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <template v-for="(column, index) of columns">
          <el-table-column :key="index"
                           :max-pix="column.maxPic"
                           :label="column.label"
                           :prop="column.prop"
                           header-align="center"
                           :align="column.algin || 'center'"
                           :width="column.width"
                           :show-overflow-tooltip="tip"
                           :sortable="column.sortable"
                           :filters="column.filters"
                           :filter-method="column.filterHandler">
            <template slot-scope="scope">
              <template v-if="!column.render">
                {
   {
    scope.row[column.prop] }}
              </template>
              <!-- render -->
              <template v-else>
                <RenderDom :row="scope.row"
                           :index="index"
                           :render="column.render" />
              </template>
              <!-- render button -->
              <template v-if="column.button">
                <template v-for="(btn, i) in column.group">
                  <el-button v-if="btn.name"
                             :key="i"
                             :type="btn.type"
                             :size="btn.size || 'mini'"
                             :icon="btn.icon"
                             :disabled="!btnList.includes(btn.disabled)"
                             :plain="btn.plain"
                             :class="btn.class"
                             @click.stop="btn.onClick(scope.row, scope.$index)">{
   {
    btn.name }}</el-button>
                  <div v-else-if="btn.dropdown"
                       :key="i"
                       @click.stop="btn.onClick(scope.row, scope.$index, btnList)">
                    <el-dropdown v-if="btn.dropdown"
                                 trigger="click"
                                 @command="btn.listClick($event, scope.row)">
                      <span class="el-dropdown-link">
                        <svg class="icon"
                             :class="{ activeIcon: currentIndex == scope.$index }">
                          <use 
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值