更新记录

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

初始化，觉得好用5星支持一下哦！有任何问题或有什么需求都可以联系我，我都尽力为大家解决

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.0 app-vue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ × × × √ √ √ √ √

使用说明

注册组件后直接使用，持自定义表格内容。

使用方式
import zhTable from '@/components/zh-table/zhTable/zhTable.vue'
在页面中使用组件
import zhTable from '@/components/zh-table/zhTable/zhTable.vue'

            <zhTable :hander_list='hander_list' :table_list='list' :height="1200" scroll_y :indicator_type='2'
    @scrollRight='scrollRight' @scrollBottom='scrollBottom'>
    <template v-slot:row="{row,index}">
        <view class="goods">
            <view class="goods_name">{{index + 1}}</view>
        </view>
        <view class="goods">
            <view class="goods_name">{{row.name}}</view>
        </view>
        <view class="goods">
            <view class="goods_name">{{row.gender}}</view>
        </view>
        <view class="goods">
            <view class="goods_name">{{row.age}}</view>
        </view>
        <view class="goods">
            <view class="goods_name">{{row.site}}</view>
        </view>
        <view class="goods">
            <view class="goods_name">{{row.birthplace}}</view>
        </view>
        <view class="goods">
            <view class="goods_name del">删除</view>
        </view>
    </template>
</zhTable>

参数说明

参数 类型 默认值 描述
is_nav Boolean false 是否自定义导航栏
height Number 表格的高度(单位rpx)；注意：顶部表头固定请设置表格高度
scroll_y Boolean false 是否允许纵向滚动；注意：设置表格高度后请允许纵向滚动，否则内容过多时无法滚动
hander_list Array [] 表头数组；注意：表头个数和表格列数保持一致
hander_key_name String name 从hander_list元素对象中读取的键名
table_hander_style Object {fontSize: '24rpx',color: '#808080'} 表头文字样式
hander_bg String #fff 表头的背景颜色
hander_height Number 88 表头高度(单位rpx)
table_list Array [] 表格数据列表 ；注意：表格列数和表头个数保持一致
label_width Number 200 每个表格的宽度(单位rpx)，表头也是这个宽度
label_height Number 120 每个表格的高度(单位rpx)
borer_left_coloe String #FAFAFA 表格左侧固定列的背景颜色
border_r Boolean true 是否显示表格竖条边框
stripe Boolean false 是否显示斑马纹；注意：为了保持美观一致，斑马纹的颜色和borer_left_coloe颜色保持一致
is_indicator Boolean true 是否显示指示器
indicator_type Number 2 指示器样式类型，默认2 可选1
indicator_size Number 12 指示器的大小(单位rpx)
inactive_color String #E7EAF2 指示器未激活颜色
active_color String #3C6DF8 指示器激活颜色
示例
<template>
    <view class="content">
        <view class="">
            <zhTable :hander_list='hander_list' :table_list='list' :height="1200" scroll_y :indicator_type='2'
                @scrollRight='scrollRight' @scrollBottom='scrollBottom'>
                <template v-slot:row="{row,index}">
                    <view class="goods">
                        <view class="goods_name">{{index + 1}}</view>
                    </view>
                    <view class="goods">
                        <view class="goods_name">{{row.name}}</view>
                    </view>
                    <view class="goods">
                        <view class="goods_name">{{row.gender}}</view>
                    </view>
                    <view class="goods">
                        <view class="goods_name">{{row.age}}</view>
                    </view>
                    <view class="goods">
                        <view class="goods_name">{{row.site}}</view>
                    </view>
                    <view class="goods">
                        <view class="goods_name">{{row.birthplace}}</view>
                    </view>
                    <view class="goods">
                        <view class="goods_name del">删除</view>
                    </view>
                </template>
            </zhTable>
        </view>
    </view>
</template>

<script>
    import zhTable from '@/components/zh-table/zhTable/zhTable.vue'
    export default {
        components: {
            zhTable
        },
        data() {
            return {
                hander_list: [{
                        id: 1,
                        name: '序号'
                    },
                    {
                        id: 2,
                        name: '姓名'
                    },
                    {
                        id: 3,
                        name: '性别'
                    },
                    {
                        id: 5,
                        name: '年龄'
                    },
                    {
                        id: 5,
                        name: '地址'
                    },
                    {
                        id: 6,
                        name: '籍贯'
                    },
                    {
                        id: 7,
                        name: '操作'
                    }
                ],
                list: [{
                        id: 1,
                        name: "张三",
                        gender: "男",
                        age: 30,
                        site: "北京市朝阳区某某路123号",
                        birthplace: "山东省济南市"
                    },
                    {
                        id: 2,
                        name: "李四",
                        gender: "女",
                        age: 25,
                        site: "上海市浦东新区某某路456号",
                        birthplace: "江苏省南京市"
                    },
                    {
                        id: 3,
                        name: "王五",
                        gender: "男",
                        age: 35,
                        site: "广州市天河区某某街789号",
                        birthplace: "湖南省长沙市"
                    },
                    {
                        id: 4,
                        name: "赵六",
                        gender: "女",
                        age: 28,
                        site: "深圳市南山区某某路101号",
                        birthplace: "河北省石家庄市"
                    },
                    {
                        id: 5,
                        name: "孙七",
                        gender: "男",
                        age: 32,
                        site: "杭州市西湖区某某巷234号",
                        birthplace: "浙江省杭州市",
                    },
                    {
                        id: 6,
                        name: "周八",
                        gender: "女",
                        age: 27,
                        site: "成都市锦江区某某路567号",
                        birthplace: "四川省成都市"
                    },
                    {
                        id: 7,
                        name: "吴九",
                        gender: "男",
                        age: 37,
                        site: "武汉市武昌区某某街890号",
                        birthplace: "湖北省武汉市"
                    },
                    {
                        id: 8,
                        name: "郑十",
                        gender: "女",
                        age: 29,
                        site: "西安市雁塔区某某路321号",
                        birthplace: "陕西省西安市"
                    },
                    {
                        id: 9,
                        name: "冯一一",
                        gender: "男",
                        age: 34,
                        site: "重庆市渝北区某某大道432号",
                        birthplace: "重庆市"
                    },
                    {
                        id: 10,
                        name: "陈二二",
                        gender: "女",
                        age: 26,
                        site: "天津市和平区某某胡同543号",
                        birthplace: "天津市"
                    }
                ]
            };
        },
        methods: {
            scrollRight() {
                //滑动到最右边触发
                console.log('滑动到最右边触发');
            },
            scrollBottom() {
                //滑动到底部边触发
                console.log('滑动到底部边触发');
            }
        },
    };
</script>
<style lang="scss" scoped>
    .content {
        padding: 32rpx;

        .goods {
            display: flex;
            align-items: center;
            justify-content: center;

            .goods_name {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                word-break: break-all;
            }

            .del {
                color: #FA3534;
                font-size: 24rpx;
            }
        }
    }
</style>

----- 别忘记点赞哟，您的肯定就是对我最大的支持 END ----- 如果任何疑问的可以在评论区留言，还可以加ZhangHaoqwezxc,我尽量解决。

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...