table 表格基于uni-ui 封装的表格带有搜索区按钮区表格区分页

更新记录

1.0.0（2024-11-07）下载此版本

table 表格

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
×	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

<template>
    <view class="pages-f">
            <view class="popup-item">
                <tables :loading="loading" :pageConfig="pageConfig" :tableColumn="tableColumn" :searchFrom="searchFrom"
                    :searchOption="searchOption" :tableData="tableData" @change="change" @selectionChange="selectionChange" @search="search" @sortChange="sortChange" @timeChangeLog="timeChangeLog" @cleanUp="cleanUp" @paginationChange="paginationChange" @tableRow="tableRow">
                    <template #search-btn>
                            <button class="mini-btn" type="primary" size="mini">插槽按钮</button>
                    </template>
                    <template #content-btn>
                        <view class="">
                            <button class="mini-btn" type="primary" size="mini" @click="add">新增</button>
                            <button class="mini-btn" type="primary" size="mini" @click="allDelete">批量删除</button>
                        </view>
                    </template>

                    <template v-slot:date="{data}">
                        <view class="" style="color: aqua;">
                            {{data.date}}
                        </view>
                    </template>
                    <template v-slot:operate="{data}">
                        <view class="" style="color: aqua;">
                            <button class="mini-btn" type="primary" size="mini" @click="onDelete(data)">删除</button>
                        </view>
                    </template>
                </tables>

            </view>
    </view>
</template>

<script>
    export default {
        name: 'PagesF',
        components: {},
        data() {
            return {
                // 此处为数据源！！！
                tableDatas: [
                    {
                        "date": "2020-09-01",
                        "name": "Dcloud1",
                        "address": "上海市普陀区金沙江路 1518 弄"
                    }, {
                        "date": "2020-09-02",
                        "name": "Dcloud2",
                        "address": "上海市普陀区金沙江路 1517 弄"
                    }, {
                        "date": "2020-09-03",
                        "name": "Dcloud3",
                        "address": "上海市普陀区金沙江路 1519 弄"
                    }, {
                        "date": "2020-09-04",
                        "name": "Dcloud4",
                        "address": "上海市普陀区金沙江路 1516 弄"
                    }, {
                        "date": "2020-09-05",
                        "name": "Dcloud5",
                        "address": "上海市普陀区金沙江路 1518 弄"
                    }, {
                        "date": "2020-09-06",
                        "name": "Dcloud6",
                        "address": "上海市普陀区金沙江路 1517 弄"
                    }, {
                        "date": "2020-09-07",
                        "name": "Dcloud7",
                        "address": "上海市普陀区金沙江路 1519 弄"
                    }, {
                        "date": "2020-09-08",
                        "name": "Dcloud8",
                        "address": "上海市普陀区金沙江路 1516 弄"
                    }, {
                        "date": "2020-09-09",
                        "name": "Dcloud9",
                        "address": "上海市普陀区金沙江路 1518 弄"
                    }, {
                        "date": "2020-09-10",
                        "name": "Dcloud10",
                        "address": "上海市普陀区金沙江路 1517 弄"
                    }, {
                        "date": "2020-09-11",
                        "name": "Dcloud11",
                        "address": "上海市普陀区金沙江路 1519 弄"
                    }, 
                ],
                searchFrom: {},
                searchOption: [
                    {
                        code: 'text',
                        lable: '金额',
                        type: 'text',
                    },
                    {
                        code: 'text',
                        lable: '金额',
                        type: 'text',
                    },
                    {
                        code: 'text',
                        lable: '金额',
                        type: 'text',
                    },
                    {
                        code: 'time',
                        lable: '时间',
                        type: 'time',
                    },
                    {
                        code: 'daterange',
                        lable: '时间范围',
                        type: 'daterange',
                    },
                    {
                        code: 'select',
                        lable: '下拉框',
                        type: 'select',
                        option: [
                                {
                                    value: 10,
                                    text: "黄金"
                                },
                                {
                                    value: 20,
                                    text: "白金"
                                },
                                {
                                    value: 30,
                                    text: "钻石"
                                },
                        ]
                    },
                ],
                tableColumn: [{
                        lable: '时间',
                        code: 'date',
                        slot: true,
                        align: 'left',
                        width: '120',
                        sortable: true
                    },
                    {
                        lable: '名字',
                        code: 'name'
                    },
                    {
                        lable: '地点',
                        code: 'address'
                    },
                    {
                        lable: '操作',
                        code: 'operate',
                        slot: true,
                        operate: true,
                    }
                ],
                tableData: [],
                pageConfig: {
                    total: 0,
                    pageSize: 10,
                    pageCurrent: 1,
                },
                loading: false,
                selectionList: []
            }
        },
        created() {
            this.getData(1)
        },
        onLoad(options) {

        },
        methods: {
            tableRow(e, i) {
                console.log('当前第', i, '行：', e)
            },
            onDelete(item) {
                console.log('点击了删除：', item)
            },
            add() {
                console.log('点击了新增')
            },
            allDelete() {
                console.log('点击了批量删除：', this.selectionList)
            },
            cleanUp() {
                console.log('点击了清除')
            },
            timeChangeLog(e) {
                console.log('时间：', e)
            },
            sortChange(e) {
                console.log('排序：', e)
            },
            search(obj) {
                console.log('搜索：', obj)
            },
            selectionChange(e) {
                console.log('选择了：', e)
                this.selectionList = e
            },
            change(e) {
                console.log('第：', e, '页')
                this.getData(e.current)
            },
            paginationChange(e) {
                console.log('一页', e, '条')
                this.pageConfig.pageSize = e
                this.getData(1)
            },
            // 获取数据
            getData(pageCurrent, value = '') {
                this.loading = true
                this.pageConfig.pageCurrent = pageCurrent
                this.request({
                    pageSize: this.pageConfig.pageSize,
                    pageCurrent: pageCurrent,
                    value: value,
                    success: res => {
                        this.tableData = res.data
                        this.pageConfig.total = res.total
                        this.loading = false
                    }
                })
            },
            // 伪request请求
            request(options) {
                const {
                    pageSize,
                    pageCurrent,
                    success,
                    value
                } = options
                let total = this.tableDatas.length
                let data = this.tableDatas.filter((item, index) => {
                    const idx = index - (pageCurrent - 1) * pageSize
                    return idx < pageSize && idx >= 0
                })
                if (value) {
                    data = []
                    this.tableDatas.forEach(item => {
                        if (item.name.indexOf(value) !== -1) {
                            data.push(item)
                        }
                    })
                    total = data.length
                }

                setTimeout(() => {
                    typeof success === 'function' &&
                        success({
                            data: data,
                            total: total
                        })
                }, 500)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pages-f {
        padding: 24px 40px 0;

    }
</style>

事件说明：

事件名	返回值	描述
input	Function(Object)	与原生input事件相同
paginationChange	number	一页展示多少条
sortChange	Function(Object)	向上或向下排序
timeChangeLog	Function(Object)	时间选择框事件
selectChange	Function(Object)	下拉选择框事件
selectionChange	Function(Object)	表格选择事件
change	number	第几页
search	Function(Object)	搜索区域的值
cleanUp	Function(Object)	清除搜索区的值
filter-change	Function(Object)	筛选数据时会触发该事件

Propos 参数

属性名	类型	默认值	可选值	说明
pageSize	Array	10， 20， 30	-	一页多少条数据
loading	Boolean	false	true/false	表格loading
searchFrom	Object	{}	-	配置搜索区域值
searchOption	Array	[]	-	配置搜索区域内容
tableColumn	Array	[]	-	配置表格字段
tableData	Array	[]		表格数据
pageConfig	Object	total: 0, pageSize: 10, pageCurrent: 1,	-	表格配置

tableColumn: [
                {
                    lable: '时间', // 名字
                    code: 'date', // 字段
                    slot: true, // 是否 插槽
                    align: 'left', // 对齐方式
                    width: '120', // 字段宽度
                    sortable: true // 是否开启排序
                },
            ]

第一版目前只适用于个人自身业务，各位大佬可自行拓展。或者联系作者进行增加

table 表格基于uni-ui 封装的表格带有搜索区按钮区表格区分页表格 pc uniapp 后台 管理

更新记录

1.0.0（2024-11-07）下载此版本

平台兼容性

事件说明：

Propos 参数

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

微信浏览器预览pdf

table 表格基于uni-ui 封装的表格带有搜索区按钮区表格区分页

table 表格 基于uni-ui 封装的表格 带有搜索区 按钮区 表格区 分页 表格 pc uniapp 后台 管理

更新记录

1.0.0（2024-11-07） 下载此版本

平台兼容性

事件说明：

Propos 参数

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

微信浏览器预览pdf

table 表格 基于uni-ui 封装的表格 带有搜索区 按钮区 表格区 分页

Modal title

table 表格基于uni-ui 封装的表格带有搜索区按钮区表格区分页表格 pc uniapp 后台管理

1.0.0（2024-11-07）下载此版本

table 表格基于uni-ui 封装的表格带有搜索区按钮区表格区分页