版权声明:只能用于学习 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,记录完毕