更新记录

1.0.16（2021-07-03） 下载此版本

优化单位组件在表格展现高度问题

1.0.15（2021-07-03） 下载此版本

修复WEB模式下参数错误的问题

1.0.14（2021-07-03） 下载此版本

图片、文字字段支持传递多层对象数据的键值

平台兼容性

qisi-nvue-table

专门针对uniapp nvue页面开发的表格组件，支持H5、app nvue、app vue端开发。 解决了开发和过程中遇到数据比较多的时候，表格显示就会非常的慢问题。 没有做太复杂的功能，主要还是考虑到性能问题！

建议

平板和PC端可以用一下，移动端就不推荐了！

插件使用

点击跳转UNI插件市场

需要注意

考虑到移动端性能，当数据大于200行时表格会强行开启数据分页展示，分页展示开关无效；当数据小于200时使用传递进来的openPage。 因为兼容nvue样式有限制，所以有些时候可能出现错误排版！

兼容

Demo

<template>
    <view>
        <qisi-nvue-table ref="table" :headers="headers" height="400px" :type="type" :data="contents" @click-row="clickRow" @selection-change="selectChange"></qisi-nvue-table>
        <view style="flex-direction: row;justify-content: space-between;padding: 20px;">
            <button @click="showData(100)" size="mini" style="width: 200px; flex: 1;">加载100条数据</button>
            <button @click="showData(500)" size="mini" style="width: 200px; flex: 1;">加载500条数据</button>
            <button @click="showData(5000)" size="mini" style="width: 200px; flex: 1;">加载5000条数据</button>

            <button @click="setType('')" size="mini" style="width: 200px; flex: 1;">关闭单选多选</button>
            <button @click="setType('selection')" size="mini" style="width: 200px; flex: 1;">开启多选</button>
            <button @click="setType('single')" size="mini" style="width: 200px; flex: 1;">开启单选</button>

            <button @click="setCurrentRow()" size="mini" style="width: 200px; flex: 1;">选中第二行</button>

            <button @click="selectAll()" size="mini" style="width: 200px; flex: 1;">全选</button>
            <button @click="toggleRowSelection()" size="mini" style="width: 200px; flex: 1;">选中2，3行</button>
            <button @click="clearSelection()" size="mini" style="width: 200px; flex: 1;">取消全部选中</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            type: '',
            headers: [
                {
                    label: '图片',
                    type: 'image',
                    key: 'image',
                    width: 50
                },
                {
                    label: '数量',
                    type: 'numberbox',
                    key: 'numberbox',
                    align: 'center',
                    width: 140
                },
                {
                    label: '姓名',
                    key: 'name',
                    width: 100,
                    align: 'center'
                },
                {
                    label: '年龄',
                    key: 'age'
                },
                {
                    label: '学院',
                    key: 'collage',
                    width: 100
                }
            ],
            contents: []
        };
    },
    created() {},
    methods: {
        showData(number) {
            if (!number) number = 100;
            var t = [];
            for (var i = 0; i < number; i++) {
                t.push({
                    name: '刘一' + i,
                    age: i,
                    image: 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/67/43/81_avatar_max.jpg',
                    collage: '学院' + i
                });
            }
            this.contents = t;
        },
        setType(type) {
            this.type = type;
        },
        clickRow(index, row) {
            console.log(index, JSON.stringify(row));
        },
        selectChange(v) {
            console.log(JSON.stringify(v));
        },
        setCurrentRow() {
            this.$refs.table.setCurrentRow(1);
        },
        selectAll() {
            this.$refs.table.selectAll();
        },
        toggleRowSelection() {
            this.$refs.table.toggleRowSelection([1, 2]);
        },
        clearSelection() {
            this.$refs.table.clearSelection();
        }
    }
};
</script>

<style lang="scss">

</style>

属性

headers属性说明

[
    {
        label: '图片',
        type: 'image',
        key: 'image',
        width: 50
    },
    {
        label: '姓名',
        key: 'name',
        width: 100,
        align: 'center'
    },
    {
        label: '数量',
        type: 'numberbox',
        key: 'numberbox',
        align: 'center',
        width: 140
    },
    {
        label: '年龄',
        key: 'age'
    },
    {
        label: '学院阿斯顿就卡手机卡的',
        key: 'collage',
        width: 100
    },
]

事件

方法