一个属于你的次元网络基地
 
昨日:篇  今日:篇   总帖:篇   会员:
小狼人Lv92   
原生小程序表格table组件开源     
说明


最近需要还原一个table效果,网上找了很多基本不适合,原生的小程序table又很少,本组件是对etable进行优化改良,感谢大佬提供的思路


支持:固定表标题与左边一列,斑马纹,边框,点击事件,表格对齐方式


使用介绍


组件在目录components中,复制到项目中使用即可


1、引入


usingComponents": {
    "easy-table": "/components/easy-table/easy-table"
 }

2、使用


<easy-table 
  border="{{false}}"//边框
  stripe="{{false}}"//斑马纹
  align="center"//对齐方式
  left="{{true}}"//固定左边栏
  y="250"//设置了高度会默认标题top悬浮
  opText="查看详情" //有内容显示操作按钮
  config="{{config}}"
/>


3、表格数据


data:{
  config: {
    //必须
      content: [
      {
        month: '2024-08',
        money: '¥22',
        money1: '¥22'
      },
      {
        month: '2024-08',
        money: '¥22',
        money1: '¥22'
      },
    ],
  titles: ["月份", "结算金额","结算金额"],
  //必须
  props: ['month', 'money','money1'],
  columnWidths: ['270rpx', '270rpx','270rpx']
}
}

content 数据,数组类型,必填

titles 头部标题,数组类型,非必填

props 每一列对应的数据的key值


columnWidths  每一列的列宽,值类型使用rpx,注意:(titles,props,columnWidths这3个数组的长度需保持一致)


源码已在:https://github.com/aizhaiyu/mini-easy-table

 1  已被阅读了229次  楼主 2024-08-21 11:57:39
回复列表

回复:原生小程序表格table组件开源

加入官群 QQ咨询 友链展示 申请友链
粤ICP备18094291号
您的IP:18.116.14.12,2024-11-21 16:30:32,Processed in 0.11538 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 8.1.0
已有0次打赏
(1) 分享
分享

请保存二维码或复制链接进行分享

取消