Element UI表格和分页以及搜索条件的合成组件（3）

版权声明：只能用于学习 https://blog.csdn.net/qq_33559093/article/details/85711872

分页和表格

先看代码

<template>
  <pagination-list :total="data.total" :loading="loading" v-on="$listeners">
    <template>
      <common-table :columns="columns" :data="data.list" v-on="$listeners" v-bind="$attrs"></common-table>
    </template>
  </pagination-list>
</template>

这里把表格组件用插槽插入分页组件之中，需要注意的还是数据传递的问题

看看分页组件

<template>
  <div class="comp-pagination-list"
       v-loading="loading"
       :element-loading-text="loadingText"
  >
    <slot></slot>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        background
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        v-bind="need">
      </el-pagination>
    </div>
  </div>
</template>

这里放了个slot,插槽，当操作分页组件的时候把数据传入搜索事件中去，比如：下一页、每页50条...

然后是表格组件，这里对element ui的表格组件做了下封装用起来方便点

<template>
  <div class="comp-common-table">
    <el-table
      class="lr-common-tb"
      ref="table"
      v-bind="filterProp"
      :data="data"
      border
      :span-method="spanMethod"
      :key="$route.name"
      :cell-style="{border: 'none'}"
      :header-cell-style="{border: 'none', height: '50px'}"
    >
      <el-table-column
        v-if="!column.event"
        v-for="(column, index) of columns"
        v-bind="column.bind"
        align="left"
        :key="index">
        <template slot-scope="scope" slot="header">
          <el-tooltip effect="dark" :content="column.needTips" placement="top"
                      :disabled="!column.needTips">
            <span>{{column.bind.label}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        v-if="column.event"
        v-for="(column, index) of columns"
        v-bind="column.bind"
        align="left"
        :key="index"
      >
        <template slot-scope="scope">
          <component
            v-for="(item, index4) in column.event.arr" :key="index4"
            :is="item.type"
            v-bind="item.bind"
            v-if="!item.show || item.show(scope.row)"
            @click.native="Event({row: scope.row}, item.routeChange, item.event, scope.$index)"
          >{{item.value}}</component>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

这里写的比较乱，意思还是清楚的，也是循环，这边是将内容，和右侧的事件分开来，右侧会有一些点击事件

看看导入的数据格式：

const tableColumn = [
  {bind: {prop: 'coinId', label: '币种ID', minWidth: '350'}},
  {bind: {prop: 'type', label: '类型'}},
  {bind: {prop: 'amount', label: '充值数量' formatter: filterLastZore}},
  {
    bind: {
      label: '查看详情',
      width: '100px',
      fixed: 'right'
    },
    event: {
      type: 'ElButton',
      arr: [
        {
          type: 'ElButton',
          bind: {size: 'mini', circle: true, icon: 'iconfont icon-jiaoy', style: {border: 'none', background: 'none'}},
          routeChange: {
            to: 'detailPage'
          }
        }
      ]
    }
  }
]

ok,记录完毕