更新记录
1.0.0(2021-03-23)
v1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
np-table
Table 表格
表格组件,主要用于表格数据展示,组件名:np-table
,代码块: 无。
使用方式
在 script
中引用组件
import npTable from '@/uni_modules/np-table/components/np-table/np-table.vue'
export default {
components: {npTable}
}
在 easycom
中配置
"easycom": {
"autoscan": true,
"custom": {
"^np-(.*)": "@/uni_modules/np-table/components/np-$1/np-$1.vue"
}
}
在 template
中使用组件
<template>
<np-table
ref="table"
:config="tableConfig"
:data="tableData"
:height="tableProp.height"
:show-header="tableProp.showHeader"
:fixed="tableProp.fixed"
:border="tableProp.border"
:stripe="tableProp.stripe"
:stripe-type="tableProp.stripeType"
:cell-pad="tableProp.cellPad"
:empty-text="tableProp.emptyText"
:formatter="formatter"
:cell-operate="cellClick">
<template #empty>
<text>-</text>
</template>
<!-- 自定义表头 [name] -->
<template #header-name="slotScope">
<text>{{ slotScope.column.label }}</text>
</template>
<!-- 自定义表头 [age] -->
<template #header-age="slotScope">
<text>{{ slotScope.column.label }}</text>
</template>
<!-- 自定义列 [name] -->
<template #name="slotScope">
<text>{{ slotScope.row.name }}</text>
</template>
<!-- 自定义列 [age] -->
<template #age="slotScope">
<text>{{ slotScope.row.age }}</text>
</template>
</np-table>
</template>
<script>
export default {
data() {
return {
tableProp: {
height: 500,
showHeader: true,
fixed: false,
border: true,
stripe: false,
stripeType: 'even',
cellPad: '10,20',
emptyText: '-'
},
<!-- 表格数据 -->
tableData: [
{ name: '张三封', age: 21, sex: 1, address: '' },
{ name: '李四', age: 29, sex: 0, address: '江苏省常州市' },
{ name: '王五', age: 26, sex: 0, address: '江苏省淮安市' },
{ name: '马六', age: 31, sex: 1, address: '江苏省无锡市' },
{ name: '张三封', age: 21, sex: 1, address: '江苏省南京市' },
{ name: '李四', age: 29, sex: 0, address: '江苏省常州市' },
{ name: '王五', age: 26, sex: 0, address: '江苏省淮安市' },
{ name: '马六', age: 31, sex: 1, address: '江苏省无锡市' },
{ name: '张三封', age: 21, sex: 1, address: '江苏省南京市' },
{ name: '李四', age: 29, sex: 0, address: '江苏省常州市' },
{ name: '王五', age: 26, sex: 0, address: '江苏省淮安市' },
{ name: '马六', age: 31, sex: 1, address: '江苏省无锡市' }
],
<!-- 表格配置 -->
tableConfig: [
{ label: 'name', prop: 'name', align: 'center' },
{ label: 'age', prop: 'age' },
{ label: 'sex', prop: 'sex' },
{ label: 'address', prop: 'address', align: 'center' },
]
};
},
methods: {
<!-- 事件 -->
cellClick(row, column, item, event) {
console.log(row, column, item, event);
},
<!-- 格式化 -->
formatter(row, column, rowConfig, value) {
if(rowConfig.prop == "sex"){
return `${value == 0 ? '男' : '女'}`;
}
return value;
},
}
}
</script>
属性说明
属性名 |
类型 |
默认值 |
说明 |
data |
Array |
required |
表格数据 |
config |
Array |
required |
表格配置(见下 config 配置) |
height |
Number |
- |
表格高度(超出滚动) |
border |
Boolean |
true |
表格边框 |
border-color |
String |
#c8c7cc |
边框颜色 |
stripe |
Boolean |
false |
斑马纹 |
stripe-type |
String |
even |
斑马纹类型(even/odd) |
fixed |
Boolean |
false |
固定表头 |
show-header |
Boolean |
true |
是否显示表头 |
header-weight |
Boolean |
false |
表头加粗 |
header-color |
String |
#606266 |
表头文字颜色 |
header-background |
String |
#FFFFFF |
表头背景色 |
empty-text |
String |
- |
表格空数据显示内容 |
cell-pad |
String |
10 |
单元格padding属性(逗号隔开),当所有单元格宽度和小于表格宽度时,会自动加宽单元格使之和与表格宽度相等 |
cell-operate |
Function |
Function(row, column, item, event) |
单元格事件(click、longpress...) |
formatter |
Function |
Function(row, column, rowConfig, value) |
单元格格式化 |
属性名 |
类型 |
默认值 |
说明 |
label |
String |
index |
表头文字 |
prop |
String |
required |
列属性名 |
align |
String |
center |
对齐方式 |
wrap |
String |
nowrap |
文字换行(wrap/nowrap) |
支持自定义slot <template #[config.prop]>
注 可以通过此方法方法重新计算单元格宽高 this.$refs['table'].forceCalc();
插件预览地址