在很多前端的后管我的项目中会存在很多表格，表格数据过多就须要分页和按条件筛选搜寻查问，于是就对el-table进行了二次封装。
页面构造如图：
PS：以前做的组件了，大家能够酌情参考，也可依据理论状况进行批改扩大。
1、首先创立一个 searchForm.vue 文件，搁置筛选查问条件和按钮。
<template> <el-form :label-width="labelWidth" label-position="right" size="small" class="search-form"> <el-container> <el-row ref="target" type="flex" class="search-form_row"> <slot></slot> <div class="el-form-item el-form-item--small"> <div class="el-form-item__content"> <el-button type="primary" size="small" @click="$emit('query')">查 询</el-button> <el-button size="small" v-if="$slots.default" @click="$emit('reset')">重 置</el-button> </div> </div> </el-row> </el-container> </el-form></template><script> export default { name: 'SearchForm', props: { labelWidth: { type: String, default: '70px' }, } }</script>2、创立 searchTable.vue 文件
<template> <el-container class="search-table"> <el-header class="search-table__header" v-if="$slots.row"> <search-form ref="form" :label-width="labelWidth" @query="$emit('query')" @reset="$emit('reset')"> <template> <slot name="row"></slot><!-- 搜寻条件 & 按钮 --> </template> </search-form> </el-header> <el-main class="search-table__body"> <el-row ref="actions" v-if="$slots.actions" class="search-table__action"> <el-col :span="24"> <slot name="actions"></slot><!-- 操作按钮 --> </el-col> </el-row> <el-table ref="tableRef" :height="tableHeight" :data="tableData" :empty-text="emptyText" stripe border highlight-current-row :row-class-name="rowClassName" tooltip-effect="light" :header-cell-style="{ fontWeight: 'bold' }" size="mini" :row-key="rowKeys" v-loading="tableLoading" :default-sort="defaultSort" @sort-change="handleSortChange" @selection-change=" selection => { this.$emit('selectionChange', selection) }" @select-all=" selection => { this.$emit('selectAll', selection) }" > <slot></slot> </el-table> </el-main> <el-footer class="search-table__footer" height="42px" v-if="$slots.footer"> <slot name="footer"></slot> </el-footer> </el-container></template><script>import SearchForm from './searchForm'export default { name: 'SearchTable', components: { SearchForm }, props: { labelWidth: { type: String, default: '70px' }, tableData: { type: Array, default: () => [] }, emptyText: { type: String, default: '' }, rowClassName: { type: Function }, rowKeys: { type: Function }, tableLoading: Boolean, defaultSort: { type: Object, default: () => {} }, }, data() { return { tableHeight: '200px' //table表格高度 } }, methods: { // 表格排序 handleSortChange(event) { const { prop, order } = event this.$emit('sortChange', { prop, order: order ? String.prototype.replace.call(order, 'ending', '') : null }) } }}</script>3、在组件中应用
<template> <el-card class="full-height full-width"> <search-table class="full-height full-width" :table-loading="loading" :tableData="tableData" :ref="tableRef" :labelWidth="'40px'" :row-keys="row => row.id" @query="currentPage = 1; query();" @reset="doReset" @selectionChange="selectionChange"> <template v-slot:row> <el-form-item label="姓名"> <el-input placeholder="请输出内容" v-model="searchForm.name" clearable></el-input> </el-form-item> <el-form-item label="年龄"> <el-input placeholder="请输出内容" v-model="searchForm.age" clearable></el-input> </el-form-item> <el-form-item label="性别"> <el-select placeholder="请抉择" v-model="searchForm.gender" clearable> <el-option :label="'运行中'" :value="0"></el-option> </el-select> </el-form-item> </template> <template v-slot:actions> <el-button size="small" type="primary">新 建</el-button> <el-button size="small" type="primary">批量删除</el-button> <el-button size="small" type="primary">批量导出</el-button> </template> <template> <el-table-column :reserve-selection="true" type="selection" width="55" /> <el-table-column prop="id" label="姓名" show-overflow-tooltip /> <el-table-column prop="age" label="年龄" show-overflow-tooltip /> <el-table-column prop="gender" label="性别" show-overflow-tooltip /> <el-table-column prop="time" label="创立工夫" show-overflow-tooltip /> </template> <template v-slot:footer> <el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" /> </template> </search-table> </el-card></template> <script> import SearchTable from '../views/components/searchTable'export default { components: { SearchTable }, data () { return { tableData: [], loading: false, tableRef: 'tableRef', searchForm: {}, currentPage: 1, pageSizes: [10, 20, 50], pageSize: 10, total: 0 }; }, methods: { query() { // 申请表格数据 }, doReset() { // 重置搜寻条件 }, selectionChange() { // 表格选项发生变化 }, handleSizeChange(val) { // 扭转每页条数 }, handleCurrentChange(val) { // 切换页码 } }}</script>