Miniprogram-table NPM

miniprogram-table

小程序表格组件，包含复选框功能

安装方式

1. 直接拷贝dist目录到组件目录下

2. npm安装

npm install miniprogram-table

构建npm

使用组件

引入table组件

{
  "usingComponents": {
    "comp-table": "componentsPath/index"
  }
}

<comp-table
    id="comp-table"
    headers="{{headers}}"
    data="{{datas}}"
    highlight-class="highlight"
    enable-checkbox="{{enableCheckbox}}"
/>

.highlight {
	background: orange !important;
	font-weight: bold;
}

属性

属性	类型	默认值	说明
headers	Array	[]	表头
header.prop	String		字段
header.label	String		表头文本
header.id	Boolean	false	是否为主键
header.width	Number	150	列宽度
header.fixed	Boolean	false	是否固定该列到左侧
header.sort	Boolean	false	使用该列进行排序，如果为function，将作为排序时比较两个数据大小的回调，接受两个参数：a和b，只需要返回a是否大于b即可
data	Array	[]	表格数据
msg	String	'一条数据都没有'	当表格中没有任何数据时，显示的提示文本
enableCheckbox	Boolean	false	是否启用复选框，仅在指定有主键时有效
height	String	'50vh'	表格高度
highlight-class	String		高亮行样式类
header-class	String		表头自定义样式类
cell-class	String		自定义单元格样式
stripe	Boolean	false	是否显示条纹
stripe-color	String	'#e5e5e5'	条纹颜色

事件

事件	detail	说明
select	{selectAll:boolean, selectedCount: number, selected: Array}	复选框事件
headerClick	{col: string, sortOrder: string}	表头被点击时触发的事件{被点击的列，该列排序方式（仅在该列sort为true时返回）