vue + element 实现的可配置的数据搜索组件

vue + element 实现的可配置的数据搜索组件（搜索框 + table展示 + 分页控制）

说明：

在管理系统中，涉及到很多根据查询条件，查出数据，然后使用表格展示的页面。

对于这种复用性极强的page，提供一个公共的组件是很必要的（样式统一、高效开发）。

主要切分为3个组件。

1、Filter 功能：搜索条件，搜索按钮

2、Table 功能：展示数据，列表内实现一些操作如：查看、编辑等

3、Pagination 功能：分页，控制页面大小，页面数

调用方式：

import FilterTable from '@/components/common/c-filter-table'
import list from './list'
export default {
    components: {
        FilterTable
    },
    created() {},
    data() {
        return {
            pageNum: 1,
            pageSize: 20,
            total: 0,
            tableList: [],
            list,
            filters: list.filterList.reduce((obj, item) => {
                if (item.type !== 'button') {
                    obj[item.key] = ''
                }
                return obj
            }, {}),
        }
    },
    methods: {
        handleClickFilterButton(buttonKey) {
            if (buttonKey === 'search') {
                this.handleClickSearch()
            }
            if (buttonKey === 'reset') {
                this.handleClickReset()
            }
            if (buttonKey === 'export') {
                this.handleClickExport()
            }
            if (buttonKey === 'add') {
                this.handleClickAdd()
            }
        },
        handleClickTableColumnHref(columnKey, row) {
            if (columnKey === 'edit') {
                console.log('click column edit')
            }
        },
        handleChangePaginationSize(size) {
            this.pageNum = 1
            this.pageSize = size
            this.handleClickSearch()
        },
        handleChangePaginationNum(num) {
            this.pageNum = num
            this.handleClickSearch()
        },
        async handleClickSearch() {
            ...
        },
        handleClickAdd() {
            ...
        },
        async handleClickReset() {
            this.filters = list.filterList.reduce((obj, item) => {
                if (item.type !== 'button') {
                    obj[item.key] = ''
                }
                return obj
            }, {})

            ...
        }
    }
}
        
复制代码

参数说明

list：搜索框配置、表格字段配置

一个list配置如下：

const list = {
    filterList: [
        {
            label: '座位号',
            key: 'id',
            type: 'input',
            span: 6
        },
        {
            label: '班级',
            key: 'class',
            type: 'select',
            options: [
                {
                    key: '1',
                    label: '一班',
                    val: '1'
                },
                {
                    key: '2',
                    label: '二班',
                    val: '2'
                }
            ],
            span: 6
        },
        {
            label: '入学日期',
            key: 'statPeriod',
            type: 'datePicker',
            span: 6,
            config: {
                type: 'date',
                placeholder: '选择日期'
            }
        },
        {
            label: '入校时长',
            key: 'backDate',
            type: 'datePicker',
            config: {
                type: 'daterange',
                rangeSeparator: '至',
                startPlaceholder: '开始日期',
                endPlaceholder: '结束日期'
            },
            span: 12
        },
        {
            label: '查询',
            key: 'search',
            type: 'button',
            config: {
                type: 'primary'
            },
            span: 2
        },
        {
            label: '重置',
            key: 'reset',
            type: 'button',
            config: {
                type: ''
            },
            span: 2
        },
        {
            label: '导出',
            key: 'export',
            type: 'button',
            config: {
                type: 'success'
            },
            span: 2
        }
    ],
    tableColumns: [
        {
            label: '状态',
            key: 'stateName'
        },
        {
            label: '编号',
            key: 'code'
        },
        {
            label: '姓名',
            key: 'name'
        },
        {
            label: '年龄',
            key: 'remark'
        },
        {
            label: '操作',
            key: 'edit',
            type: 'href',
            filter: () => '编辑'
        }
    ],
复制代码

filterList 用于配置搜索框 对应的事件处理为：listenHandleClickFilterButton

tableColumns 用于配置表格字段 对应的事件处理为：listenHandleClickTableColumnHref

tableList: 搜索结果，传入table的数据

pageNum、pageSize、total: 分页需要的数据

对应的控制分页事件为：listenHandleChangePaginationSize、listenHandleChangePaginationNum

c-filter-table完整代码：

复制代码

转载于:https://juejin.im/post/5c909c995188252dac6d292b