更新记录
1.0.0(2024-10-25) 下载此版本
初始版本
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
属性 | 类型 | 可选 | 说明 |
---|---|---|---|
columns | arrary | 必须 | 对象数组{name: 显示列属性名,label: 列名, width: 列宽(可选,默认为流式布局)} |
datas | arrary | 必须 | 数据 |
bodyHeights | string | 可选 | 滚动区域高度 |
事件 | 说明 |
---|---|
@onRowClick(row) | 点击某一行时返回当前行对象 |
具体使用规则参照下面代码示例
<template>
<view>
<zz-table :columns="columns" :data="users" :bodyHeight= 500 @onRowClick="handleUserClick" />
</view>
</template>
<script>
export default {
data() {
return {
columns: [{
name: 'id',
label: 'id',
width: '50px'
},
{
name: 'name',
label: '姓名'
},
{
name: 'email',
label: '邮箱'
},
{
name: 'address',
label: '地址'
}
],
users: [{
id: 1,
name: '张三',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'zhangsan@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
},
{
id: 2,
name: '李四',
sex: '男',
address: '对方回答说江户时代恢复数据库',
email: 'lisi@example.com'
}
],
};
},
methods: {
handleUserClick(row) {
console.log('Selected user:', row);
}
}
};
</script>
<style scoped>
</style>