更新记录

1.0.0(2021-03-23)

v1.0.0


平台兼容性

Vue2 Vue3
×
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) 单元格格式化

config属性配置

属性名 类型 默认值 说明
label String index 表头文字
prop String required 列属性名
align String center 对齐方式
wrap String nowrap 文字换行(wrap/nowrap)

支持自定义slot <template #[config.prop]>

属性名 说明
empty 空数据显示内容
header-[config.prop] 自定义表头显示
[config.prop] 自定义列显示

可以通过此方法方法重新计算单元格宽高 this.$refs['table'].forceCalc();

插件预览地址

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问