更新记录

1.1.4（2024-04-08）

增加禁用功能

1.1.3（2024-01-31）

修复align配置不生效问题

1.1.2（2024-01-26）

更新vue2使用说明

平台兼容性

介绍

基于uni-app开发的一个普通的表格组件，功能有固定首列和表头、排序、操作按钮、 table 表格 固定表头、固定首列、多列 上拉加载更多、 排序、自适应列宽、多选checkbox、编辑、删除、按钮、合计 多页功能 已用于生产环境

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

参考依赖

本组件居于github开源项目zb-table进行二开，功能会有些差异和增强，如果有需要原版请参考源开源项目。感谢作者

注意本插件依赖于scss的编译，如果没有使用scss请手动改源码去掉scss的语法方可使用。如果有疑问请加入加入QQ群(455948571)

注意

作者不介意你对组件源码进行改造使用，为了开源更加高效，谢谢你的配合；为了节省不必要的沟通浪费，以下情况请不要再反馈给作者，请自行解决；

在这感各位的理解，我支持开源，但是作者时间有限；谢谢各位的配合；在这里期望我写的小小插件能为你提供便捷；

1.如果你对源码进行了修改使用，请不需要对作者做任何的反馈，作者确实没有空陪你做技术分析解答；
2.如果你引入插件，连插件是否有正常被uniapp框架识别解析都不清楚，请你换个插件使用；
3.如果你引入插件，针对自己项目进行功能改造的，请自行仔细阅读源码并了解其原理，自行改造；这里作者不愿意浪费过多时间进行技术解答；

使用

从uniapp插件市场导入

预览

功能预览

示例demo(vue3 + ts)

<next-table
            :show-header="true"
            :columns="column"
            :stripe="true"
            :fit="false"
            show-summary
            sum-text="合计"
            @rowClick="rowClick"
            :summary-method="getSummaries"
            @toggleRowSelection="toggleRowSelection"
            @toggleAllSelection="toggleAllSelection"
            :border="true"
            @edit="buttonEdit"
            @dele="dele"
            :data="datalist"></next-table>

<script setup lang="ts">
import {ref, unref} from "vue"
const pageIndex = ref(1)
const pageTotal = ref(5)
const datalist = ref([])
const checkNameList = ref([])

function getdatalist(pageIndex) {
    const pageSize = 10
    const arr = []
    for(let i = pageSize*(pageIndex-1) + 1; i < pageSize*pageIndex; i++) {
        arr.push({
            date: '2023-06-23',
            name: `刘先生${i}`,
            province: '上海',
            sex: i%2 ? '0' : '1',
            disabled: i%2 ? true : false,
            checked: unref(checkNameList)[unref(pageIndex)] ? unref(checkNameList)[unref(pageIndex)].indexOf(`刘先生${i}`) !== -1 : false,
            age: 20,
            img: 'https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e58ae9feb1003af34defd464001aea6a/8601a18b87d6277f4d763bcf2f381f30e824fce5.jpg',
            city: '广州市',
            address: '天河区东圃镇2002号',
            zip: 200333
        })
    }
    datalist.value = arr
} 
function pageChange(index) {
    pageIndex.value = index
    getdatalist(unref(pageIndex))
}
function dele(item) {
    const index = unref(datalist).findIndex(it => it.name == item.name)
    if (index != -1) {
        unref(datalist).splice(index, 1)
    }
}
function toggleAllSelection(_, list) {
    unref(checkNameList)[unref(pageIndex)] = list.map(item => item.name)
}
function toggleRowSelection(bool, list) {
    unref(checkNameList)[unref(pageIndex)] = list.map(item => item.name)
}
function buttonEdit(item) {
    console.log(111111, item)
}
const column = ref([
    { type:'selection', fixed:true,width:60 },
    { name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
    { name: 'age', label: '年纪',sorter:false,align:'right', },
    { name: 'sex', label: '性别',filters:{'0':'男','1':'女'}},
    { name: 'img', label: '图片',type:"img" },
    { name: 'address', label: '地址' },
    { name: 'date', label: '日期',sorter:true },
    { name: 'province', label: '省份' },
    { name: 'city', label: '城市' },
    { name: 'zip', label: '邮编' },
    { name: 'operation', type:'operation',label: '操作',renders:[
        {
            name:'编辑',
            func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
        },
        {
            name:'删除',
            type:'warn',
            func:"dele"
        },
    ]},
])
getdatalist(unref(pageIndex))
</script>

示例demo(vue2)

<next-table
    :show-header="true"
    :columns="column"
    :stripe="true"
    :fit="false"
    show-summary
    sum-text="合计"
    @rowClick="rowClick"
    :summary-method="getSummaries"
    @toggleRowSelection="toggleRowSelection"
    @toggleAllSelection="toggleAllSelection"
    :border="true"
    @edit="buttonEdit"
    @dele="dele"
    :data="datalist"></next-table>

<script>
export default {
    data () {
        return {
            pageIndex: 1,
            pageTotal: 5,
            datalist: [],
            checkNameList: [],
            column: [
                { type:'selection', fixed:true,width:60 },
                { name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
                { name: 'age', label: '年纪',sorter:false,align:'right', },
                { name: 'sex', label: '性别',filters:{'0':'男','1':'女'}},
                { name: 'img', label: '图片',type:"img" },
                { name: 'address', label: '地址' },
                { name: 'date', label: '日期',sorter:true },
                { name: 'province', label: '省份' },
                { name: 'city', label: '城市' },
                { name: 'zip', label: '邮编' },
                { name: 'operation', type:'operation',label: '操作',renders:[
                    {
                        name:'编辑',
                        func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
                    },
                    {
                        name:'删除',
                        type:'warn',
                        func:"dele"
                    },
            ]
        }
    },
    methods: {
        getdatalist(pageIndex) {
            const pageSize = 10
            const arr = []
            for(let i = pageSize*(pageIndex-1) + 1; i < pageSize*pageIndex; i++) {
                arr.push({
                    date: '2023-06-23',
                    name: `刘先生${i}`,
                    province: '上海',
                    sex: i%2 ? '0' : '1',
                    checked: this.checkNameList[this.pageIndex] ? this.checkNameList[this.pageIndex].indexOf(`刘先生${i}`) !== -1 : false,
                    age: 20,
                    img: 'https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e58ae9feb1003af34defd464001aea6a/8601a18b87d6277f4d763bcf2f381f30e824fce5.jpg',
                    city: '广州市',
                    address: '天河区东圃镇2002号',
                    zip: 200333
                })
            }
            this.datalist = arr
        },
        pageChange(index) {
            this.pageIndex = index
            this.getdatalist(this.pageIndex)
        },
        dele(item) {
            const index = this.datalist.findIndex(it => it.name == item.name)
            if (index != -1) {
                this.datalist.splice(index, 1)
            }
        },
        toggleAllSelection(_, list) {
            this.checkNameList[this.pageIndex] = list.map(item => item.name)
        },
        toggleRowSelection(bool, list) {
            this.checkNameList[this.pageIndex] = list.map(item => item.name)
        },
        buttonEdit(item) {
            console.log(111111, item)
        }
    },
    created() {
        this.getdatalist(this.pageIndex)
    }
}

</script>

table 属性

关闭上拉加载的方式1：pullUpLoading((done)=>{
    done(type)
})
done 接收参数为 type ，type为空代表还有数据，可以继续加载，无数据的时候传入 'ok'代表结束

table 事件

data 属性

column 属性

type 为 operation 的时候代表为操作按钮
renders 代表传入的按钮  Array  =>[
    {
        name:'编辑',
        class:"", // 添加class
        type:'primary',代表按钮的类型  type 为custom的时候自定义按钮 其他类型取决于uniapp buttom组件按钮
        size:'mini',代表按钮的大小
        func:'edit' // func 代表操作按钮点击的事件名字 父元素接收的事件 父元素 @edit
        例如：// <next-table @edit=""/> 

    }
]