npm.io
0.0.4 • Published 3 years ago

zm-table

Licence
MIT
Version
0.0.4
Deps
0
Size
111 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

使用方法

  1. 安装组件
    npm install --save zm-table
  2. 在页面的json配置文件中添加table和table-column自定义组件的配置
    "usingComponents": {
    "zm-table": "zm-table/table/index",
    "zm-table-column": "zm-table/table-column/index"
}
  3. WXML文件中引用table和table-column
    <zm-table data="{{ tableData }}" align="center" border>
    <zm-table-column label="名字" prop="name"></zm-table-column>
    <zm-table-column type="input" input-type="number" label="年龄" prop="age"></zm-table-column>
</zm-table>
  4. js文件中定义
    Page({
    data: {
        tableData: [
            { name: 'sike', age: 20 },
            { name: '滑稽', age: 16 },
        ],
    }
})

组件介绍

Table Attributes
参数 说明 类型 必填 可选值 默认值
data 显示的数据 array 是 —— ——
height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 rpx；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 string / number 否 —— ——
max-height Table 的最大高度。 string / number 否 —— ——
stripe 是否为斑马纹 table boolean 否 —— false
border 是否带有纵向边框 boolean 否 —— false
size Table 的尺寸 string 否 medium / small / mini ——
align 对齐方式 string 否 center / right ——
show-header 是否显示表头 boolean 否 —— true
empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置 string 否 —— 暂无数据
show-summary 是否在表尾显示合计行 boolean 否 —— false
sum-text 合计行第一列的文本 string 否 —— 合计
summary-method 自定义的合计计算方法 function({ columns, data }) 否 —— ——
row-hover 点击态效果 boolean 否 —— false
custom-style 自定义样式 string 否 —— ——
input-delay 当 column 的类型为 input 时的防抖时间 nuber 否 —— 300
dataset 事件源组件上由data-开头的自定义属性组成的集合 object 否 —— ——
Table Events
事件名 说明 参数(event.detail)
header-click 当某一列的表头被点击时会触发该事件 column, event
row-click 当某一行被点击时会触发该事件 row, rowIndex, cell, cellIndex, column, event
cell-click 当某个单元格被点击时会触发该事件 row, rowIndex, cell, cellIndex, column, event
row-long-press 当某一行被长按时会触发该事件 row, rowIndex, cell, cellIndex, column, event
cell-long-press 当某个单元格被长按时会触发该事件 row, rowIndex, cell, cellIndex, column, event
cell-input 当某个单元格键盘输入时会触发该事件 row, rowIndex, cell, cellIndex, column, event
cell-input-focus 当某个单元格输入框聚焦时触发 row, rowIndex, cell, cellIndex, column, value, event
cell-input-blur 当某个单元格输入框失去焦点时触发 row, rowIndex, cell, cellIndex, column, value, event
cell-input-confirm 当某个单元格点击完成按钮时触发 row, rowIndex, cell, cellIndex, column, value, event
selection-change 当选择项发生变化时会触发该事件 selection
click 当某个单元格按钮被点击时触发 row, rowIndex, cell, cellIndex, column, event
Table Slot
name 说明
empty 自定义空数据时显示的元素
append 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。
Table-column Attributes
参数 说明 类型 必填 可选值 默认值
type 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 input 则显示输入框；如果设置了 textarea 则显示多行输入框 string 否 selection / index / input / textarea / button ——
input-type 当 type 值为 input 时，可选值参考微信小程序 input 原生支持属性 string 否 —— text
label 显示的标题 string 是 —— ——
prop 对应列内容的字段名 string 是 —— ——
width 对应列的宽度 string 否 —— ——
min-width 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度自动分配 string 否 —— ——
disabled 当 type 值为 selection / input / textarea 时，是否禁用 boolean 否 —— false
auto-height 当 type 值为 textarea 时，是否自动增高 boolean 否 —— false
color 当 type 值为 selection 时，checkbox的颜色，同 css 的color string 否 —— #09BB07
align 对齐方式，优先级高于 table 的 align 属性 string 否 center / right ——
custom-style 自定义样式 string 否 —— ——
button 需要渲染的按钮，按钮对象组成数组，按钮对象属性可选值参考微信小程序 button 原生支持属性，设置 triggerEvent 属性组件内部会触发对应名字的事件 array 否 —— ——