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时返回） |

方法

通过this.selectComponent('#id')组件实例调用的方法

| 方法 | 参数 | 说明 | | ----------- | ---- | ------------ | | getSelected | - | 获取选中数据 |

更新说明

v1.2.0

• 新增headerClick事件
• 修改header.sort的值只能为true or false