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