更新记录
1.0.4(2025-02-26) 下载此版本
将选项框放到最右边
1.0.3(2025-02-26) 下载此版本
增加fontsize字段,可设置字体大小
1.0.2(2025-02-25) 下载此版本
纠正默认索引设置无效问题
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | √ | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
wulin-LeftTopTable
一、props属性说明:
issingle: Boolean。是否单选,false开启多选,默认单选
eachpagenum:Number。每页显示的行数,默认为0,即不分页
list: Array。要显示的行对象数组
fields: Array。要显示的列名对象数组,如:
[
{name:'name',
colname:'姓名',
width:'350rpx',//列最小宽度(表格会自动换行,如条码B20240802021类内容会自动加宽)
fontsize:'25rpx' // 不输入默认为25rpx
},
{name:'sex',
colname:'性别',
width:'250rpx',
fontsize:'25rpx'
}
]
outselectindex: 加载表格组件时,@resdata事件默认输出的selectindex索引值
二、返回事件
@resdata="resdata", 操作数据返回事件,如:
resdata(res){
console.log('当前选中的索引',res.selectindex)
console.log('被选中数组',JSON.stringify(res.data))
}
三、使用举例(注:请给组件设置高度,不然不显示):
<template>
<view >
<wulin-LeftTopTable style="height: 50vh;" :issingle="false" :eachpagenum="30" :list="list" :fields="fields" @resdata="resdata"></wulin-LeftTopTable>
</view>
</template>
export default {
data() {
return {
list: [],
fields: [{
name: "name",
colname: "姓名",
width: "450rpx",
fontsize:'25rpx'
}, {
name: "sex",
colname: "性别",
width: "380rpx",
fontsize:'25rpx'
}],
};
},
onload() {
},
mounted(){
for (let i = 0; i < 596; i++) {
let dx = {
name: "姓名1" + i,
sex: "女"
}
this.list.push(dx)
}
},
methods: {
resdata(res){
console.log('当前选中的索引',res.selectindex)
console.log('被选中数组',JSON.stringify(res.data))
}
}
}