更新记录

1.0.6（2024-09-29）

修复微信小程序端样式乱的问题

1.0.5（2024-09-21）

修改了微信小程序上样式乱的情况。

1.0.4（2022-06-08）

1、修复了顶部不冻结，左侧冻结情况下，不冻结列不能滑动的问题 2、增加了对pc浏览器、微信小程序的支持

查看更多

平台兼容性

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

实现思路: 1、左侧列冻结:左右用两个table，左侧的table z-index > 右侧的table 2、顶部列冻结:thead的position属性设为fixed 如果还需要左侧列冻结，则需要监听水平滑动事件，使得右侧表格head和body部分左右滑动一致 顶部和左侧同时冻结的情况，因为左右滑动的效果是通过js实现的，所以比较卡，待优化。 3、不要将父元素的display设置为flex，否则表格样式可能错乱。

暂有缺陷: 1、顶部和左侧同时冻结的情况，因为左右滑动的效果是通过js实现的，所以比较卡 2、pc端浏览器下， 上下支持滑动，但不支持拖动； 顶部和左侧同时冻结的情况下，右侧不冻结的列，支持左右黏连拖动，但不支持滑动。

属性 注释 举例
tableHead 表头列表 [{name: '列1', key: 'column1', width: 80}, {name: '列2', key: 'column2', width: 80}]
leftFrozenColumns 冻结的表头列表，默认为空不需要冻结 [{name: '列1', key: 'column1', width: 80}]
tableHeadFrozen 表头是否要冻结，默认不需要冻结 false
tableList 表格数据 [{column1: 'data1_1', column2: 'data1_2'}, {column1: 'data2_1', column2: 'data2_2'}]

使用方法：

 <template>
    <view class="content" style="height: 200px;">
        <gzy-topLeftFixableTable
            :tableHead="tableHead"
            :tableHeadFrozen="true"
            :leftFrozenColumns="leftFrozenColumns"
            :tableList="tableList"></gzy-topLeftFixableTable>
    </view>
 </template>

 <script>
    export default {
        data() {
            return {
                tableList: [
                    {column1: 'data1_1', column2: 'data1_2', column3: 'data1_3', column4: 'data1_4', column5: 'data1_5', column6: 'data1_6', column7: 'data1_7', column8: 'data1_8', column9: 'data1_9'},
                    {column1: 'data2_1', column2: 'data2_2', column3: 'data2_3', column4: 'data2_4', column5: 'data2_5', column6: 'data2_6', column7: 'data2_7', column8: 'data2_8', column9: 'data2_9'},
                    {column1: 'data3_1', column2: 'data3_2', column3: 'data3_3', column4: 'data3_4', column5: 'data3_5', column6: 'data3_6', column7: 'data3_7', column8: 'data3_8', column9: 'data3_9'},
                    {column1: 'data4_1', column2: 'data4_2', column3: 'data4_3', column4: 'data4_4', column5: 'data4_5', column6: 'data4_6', column7: 'data4_7', column8: 'data4_8', column9: 'data4_9'},
                    {column1: 'data5_1', column2: 'data5_2', column3: 'data5_3', column4: 'data5_4', column5: 'data5_5', column6: 'data5_6', column7: 'data5_7', column8: 'data5_8', column9: 'data5_9'},
                    {column1: 'data6_1', column2: 'data6_2', column3: 'data6_3', column4: 'data6_4', column5: 'data6_5', column6: 'data6_6', column7: 'data6_7', column8: 'data6_8', column9: 'data6_9'},
                    {column1: 'data7_1', column2: 'data7_2', column3: 'data7_3', column4: 'data7_4', column5: 'data7_5', column6: 'data7_6', column7: 'data7_7', column8: 'data7_8', column9: 'data7_9'},
                    {column1: 'data8_1', column2: 'data8_2', column3: 'data8_3', column4: 'data8_4', column5: 'data8_5', column6: 'data8_6', column7: 'data8_7', column8: 'data8_8', column9: 'data8_9'},
                    {column1: 'data9_1', column2: 'data9_2', column3: 'data9_3', column4: 'data9_4', column5: 'data9_5', column6: 'data9_6', column7: 'data9_7', column8: 'data9_8', column9: 'data9_9'},
                    {column1: 'data10_1', column2: 'data10_2', column3: 'data10_3', column4: 'data10_4', column5: 'data10_5', column6: 'data10_6', column7: 'data10_7', column8: 'data10_8', column9: 'data10_9'},
                    {column1: 'data11_1', column2: 'data11_2', column3: 'data11_3', column4: 'data11_4', column5: 'data11_5', column6: 'data11_6', column7: 'data11_7', column8: 'data11_8', column9: 'data11_9'},
                    {column1: 'data12_1', column2: 'data12_2', column3: 'data12_3', column4: 'data12_4', column5: 'data12_5', column6: 'data12_6', column7: 'data12_7', column8: 'data12_8', column9: 'data12_9'},
                    {column1: 'data13_1', column2: 'data13_2', column3: 'data13_3', column4: 'data13_4', column5: 'data13_5', column6: 'data13_6', column7: 'data13_7', column8: 'data13_8', column9: 'data13_9'},
                    {column1: 'data14_1', column2: 'data14_2', column3: 'data14_3', column4: 'data14_4', column5: 'data14_5', column6: 'data14_6', column7: 'data14_7', column8: 'data14_8', column9: 'data14_9'},
                    {column1: 'data15_1', column2: 'data15_2', column3: 'data15_3', column4: 'data15_4', column5: 'data15_5', column6: 'data15_6', column7: 'data15_7', column8: 'data15_8', column9: 'data15_9'},
                    {column1: 'data16_1', column2: 'data16_2', column3: 'data16_3', column4: 'data16_4', column5: 'data16_5', column6: 'data16_6', column7: 'data16_7', column8: 'data16_8', column9: 'data16_9'},
                    {column1: 'data17_1', column2: 'data17_2', column3: 'data17_3', column4: 'data17_4', column5: 'data17_5', column6: 'data17_6', column7: 'data17_7', column8: 'data17_8', column9: 'data17_9'},
                    {column1: 'data18_1', column2: 'data18_2', column3: 'data18_3', column4: 'data18_4', column5: 'data18_5', column6: 'data18_6', column7: 'data18_7', column8: 'data18_8', column9: 'data18_9'},
                    {column1: 'data19_1', column2: 'data19_2', column3: 'data19_3', column4: 'data19_4', column5: 'data19_5', column6: 'data19_6', column7: 'data19_7', column8: 'data19_8', column9: 'data19_9'},
                    {column1: 'data1_1', column2: 'data1_2', column3: 'data1_3', column4: 'data1_4', column5: 'data1_5', column6: 'data1_6', column7: 'data1_7', column8: 'data1_8', column9: 'data1_9'},
                    {column1: 'data2_1', column2: 'data2_2', column3: 'data2_3', column4: 'data2_4', column5: 'data2_5', column6: 'data2_6', column7: 'data2_7', column8: 'data2_8', column9: 'data2_9'},
                    {column1: 'data3_1', column2: 'data3_2', column3: 'data3_3', column4: 'data3_4', column5: 'data3_5', column6: 'data3_6', column7: 'data3_7', column8: 'data3_8', column9: 'data3_9'},
                    {column1: 'data4_1', column2: 'data4_2', column3: 'data4_3', column4: 'data4_4', column5: 'data4_5', column6: 'data4_6', column7: 'data4_7', column8: 'data4_8', column9: 'data4_9'},
                    {column1: 'data5_1', column2: 'data5_2', column3: 'data5_3', column4: 'data5_4', column5: 'data5_5', column6: 'data5_6', column7: 'data5_7', column8: 'data5_8', column9: 'data5_9'},
                    {column1: 'data6_1', column2: 'data6_2', column3: 'data6_3', column4: 'data6_4', column5: 'data6_5', column6: 'data6_6', column7: 'data6_7', column8: 'data6_8', column9: 'data6_9'},
                    {column1: 'data7_1', column2: 'data7_2', column3: 'data7_3', column4: 'data7_4', column5: 'data7_5', column6: 'data7_6', column7: 'data7_7', column8: 'data7_8', column9: 'data7_9'},
                    {column1: 'data8_1', column2: 'data8_2', column3: 'data8_3', column4: 'data8_4', column5: 'data8_5', column6: 'data8_6', column7: 'data8_7', column8: 'data8_8', column9: 'data8_9'},
                    {column1: 'data9_1', column2: 'data9_2', column3: 'data9_3', column4: 'data9_4', column5: 'data9_5', column6: 'data9_6', column7: 'data9_7', column8: 'data9_8', column9: 'data9_9'},
                    {column1: 'data10_1', column2: 'data10_2', column3: 'data10_3', column4: 'data10_4', column5: 'data10_5', column6: 'data10_6', column7: 'data10_7', column8: 'data10_8', column9: 'data10_9'},
                    {column1: 'data11_1', column2: 'data11_2', column3: 'data11_3', column4: 'data11_4', column5: 'data11_5', column6: 'data11_6', column7: 'data11_7', column8: 'data11_8', column9: 'data11_9'},
                    {column1: 'data12_1', column2: 'data12_2', column3: 'data12_3', column4: 'data12_4', column5: 'data12_5', column6: 'data12_6', column7: 'data12_7', column8: 'data12_8', column9: 'data12_9'},
                    {column1: 'data13_1', column2: 'data13_2', column3: 'data13_3', column4: 'data13_4', column5: 'data13_5', column6: 'data13_6', column7: 'data13_7', column8: 'data13_8', column9: 'data13_9'},
                    {column1: 'data14_1', column2: 'data14_2', column3: 'data14_3', column4: 'data14_4', column5: 'data14_5', column6: 'data14_6', column7: 'data14_7', column8: 'data14_8', column9: 'data14_9'},
                    {column1: 'data15_1', column2: 'data15_2', column3: 'data15_3', column4: 'data15_4', column5: 'data15_5', column6: 'data15_6', column7: 'data15_7', column8: 'data15_8', column9: 'data15_9'},
                    {column1: 'data16_1', column2: 'data16_2', column3: 'data16_3', column4: 'data16_4', column5: 'data16_5', column6: 'data16_6', column7: 'data16_7', column8: 'data16_8', column9: 'data16_9'},
                    {column1: 'data17_1', column2: 'data17_2', column3: 'data17_3', column4: 'data17_4', column5: 'data17_5', column6: 'data17_6', column7: 'data17_7', column8: 'data17_8', column9: 'data17_9'},
                    {column1: 'data18_1', column2: 'data18_2', column3: 'data18_3', column4: 'data18_4', column5: 'data18_5', column6: 'data18_6', column7: 'data18_7', column8: 'data18_8', column9: 'data18_9'},
                    {column1: 'data19_1', column2: 'data19_2', column3: 'data19_3', column4: 'data19_4', column5: 'data19_5', column6: 'data19_6', column7: 'data19_7', column8: 'data19_8', column9: 'data19_9'},
                ],
                leftFrozenColumns: [{name: '列1', key: 'column1', width: 80}, {name: '列2', key: 'column2', width: 80}, {name: '列3', key: 'column3', width: 80}],
                tableHead: [
                    {name: '列1', key: 'column1', width: 80}, {name: '列2', key: 'column2', width: 80}, {name: '列3', key: 'column3', width: 80},
                    {name: '列4', key: 'column4', width: 80}, {name: '列5', key: 'column5', width: 80}, {name: '列6', key: 'column6', width: 80},
                    {name: '列7', key: 'column7', width: 80}, {name: '列8', key: 'column8', width: 80}, {name: '列9', key: 'column9', width: 80},
                ]
            }
        },
        onLoad() {
        },
        methods: {
        }
    }
 </script>

隐私、权限声明

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

无

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

无

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

无

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

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

加载更多...