乐趣区

关于element-ui:elementui之eltable的二次封装带条件查询及翻页功能

在很多前端的后管我的项目中会存在很多表格,表格数据过多就须要分页和按条件筛选搜寻查问,于是就对 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>
退出移动版