更新记录
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>