更新记录

v1.0.2(2022-01-28)

-上传示例

v1.0.1(2022-01-28)

-修改uni-app的uni-scroll滚动时不能固定首列、首行问题

v1.0.0(2022-01-27)

-chenfly-uniapp-table固定首列首行 -可以分级

查看更多

平台兼容性

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

Table 固定首列、首行

主要提供能table首列、首行功能

根据主题颜色变化:

属性 值类型 说明
tableHeader object 固定首行时,头部数据
classifyData object 传入的最左侧大分类数据
headerKey string 当不使用slot修改头部,渲染数据的属性
leftFixKey string 当不使用slot修改左侧固定栏,渲染数据的属性
contentKey string 当不使用slot修改body展现数据第一层,渲染数据的属性
classItemKey string 传入的最左侧大分类数据具体属性
unitKey string 当不使用slot修改body展现数据第二层,渲染数据的属性
classify string 左侧有分类分级时需要传入用来做大类区分的属性名
leftFixWidth string 左侧固定列的宽度
headerTitle string 表格的title
headerStyle object 修改表头单元格样式
leftFixStyle object 修改左侧固定栏单元格样式
contentStyle object 修改内容单元格样式

用法:(如不需要修改单元格,可以不适用slot)

<template>
    <view>
        <chenfly-table :tableContentLeftFixed="tableContentLeftFixed"
                 :tableHeader="tableHeader"
                 :tableContent="tableContent"
                 :classifyData="classifyData"
                 :headerStyle="headerStyle"
                 :headerTitle="headerTitle"
                 headerKey="name"
                 leftFixWidth="15%"
                 contentKey="content"
                 unitKey="name"
                 classify="id"
                 classItemKey="class"
                 >
            <template v-slot:header="{header}">
                <view>{{header.name}}</view>
            </template>
            <template v-slot:leftFix="{leftFix}">
                <view>{{leftFix.name}}</view>
            </template>
            <template v-slot:content="{content}">
                <view>{{content}}</view>
            </template>
            <template v-slot:classifyItem="{classifyItem}">
                <view>{{classifyItem}}</view>
            </template>
        </chenfly-table>
    </view>
</template>

<script>
    export default{
        data(){
            return {
                tableHeader: [{name:'09:00'},{name:'10:00'},{name:'11:00'},{name:'12:00'},{name:'13:00'},{name:'14:00'},{name:'15:00'}],
                tableContent: [{
                    content: [1,2,3,4,5,6,7],
                },{
                    content: [1,2,3,4,5,6,7],
                },{
                    content: [1,2,3,4,5,6,7],
                },{
                    content: [1,2,3,4,5,6,7],
                },{
                    content: [1,2,3,4,5,6,7],
                },{
                    content: [1,2,3,4,5,6,7],
                }],
                classifyData: [{
                    id:'指标一',
                    class: [{
                        name: '测试1'
                    },{
                        name: '测试2'
                    },{
                        name: '测试3'
                    }]
                },{
                    id:'指标二',
                    class: [{
                        name: '测试4'
                    },{
                        name: '测试5'
                    }]
                },{
                    id:'指标三',
                    class: [{
                        name: '测试1',
                        style: {minHeight: '60px',display:'flex',alignItems: 'center'}
                    }]
                }],
                headerStyle: {height:'100%'},
                headerTitle: "题目"
            }
        }
    }
</script>

<style>
</style>

隐私、权限声明

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

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

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

许可协议

MIT协议

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