更新记录

1.0.0（2025-08-28） 下载此版本

2025.8.28首次上传插件

平台兼容性

uni-app(4.65)

其他

bj-super-tabel是一款基于uniapp开发的表格组件

非常适合直接在项目中使用，或者二开后进行使用,其代码结构简单易懂，也适合新手学习使用,目前仅支持H5使用，小程序版本后续会继续开发

组件使用说明及示例

<!-- tabelData接口数据 | columData表格设置数据 | selectData 将返回选中的数据 -->
<bj-super-tabel :tabeldata="tabelData" :columdata="columData" @selectData="selectData">
    <!-- v-slot:status="scope" v-slot:字段名  scope可以使用任意非关键词代替，记得设置isSlot为true-->
    <template v-slot:status="scope">
        <view>
            <view class="" v-if="scope.row.status == 1">
                正常
            </view>
            <view class="" v-if="scope.row.status == 0">
                异常
            </view>
        </view>
    </template>

    <template v-slot:handel="scope">
        <view class="button-content">
            <view class="button-content-item" @click="deleteOneData">
                删除
            </view>
            <view class="button-content-item" @click="editeOneData">
                编辑
            </view>
        </view>

    </template>
</bj-super-tabel>

import bjSuperTabel from "@/components/bj-super-tabel/bj-super-tabel.vue"
export default {
    data() {
        return {
            tabelData:[ 
                {
                    id:1,
                    name:"张三",
                    status:1,
                    age:18,
                    sex:1,
                    city:'广州'
                },
                {
                    id:2,
                    name:"李四",
                    status:0,
                    age:19,
                    sex:1,
                    city:'广州'
                },
                {
                    id:3,
                    name:"王五",
                    status:1,
                    age:50,
                    sex:1,
                    city:'广州'
                }
            ],
            columData:{
                selectMore:true,//是否展示多选框
                isScroll:false,//是否开启滚动,数据多建议滚动，数据少建议不滚动
                border:false,//表格的border
                headerColor:"#eee",//表头的颜色
                borderStyle:{//border的宽度和颜色
                    color:'#999',
                    width:1 //单位px
                },
                data:[
                    {
                        label:"id", //标题名称
                        prop:"id", //字段名称
                        width:"20", //宽度
                        isSolt:false //是否使用插槽
                    },
                    {
                        label:"名字",
                        prop:"name",
                        width:"60",
                        isSolt:false
                    },

                    {
                        label:"状态",
                        prop:"status",
                        width:"60",
                        isSolt:true
                    },
                    {
                        label:"操作",
                        prop:"handel",
                        width:"90",
                        isSolt:true
                    }
                ]
            }
        }
    },
    onLoad() {

    },
    methods: {
        selectData(data){
            console.log(data,"选中的数据---");
        },
        deleteOneData(){
            console.log(1111);
        },
        editeOneData(){
            console.log('编辑数据');
        }
    }
}