# qisi-nvue-table

**Repository Path**: phpjishu/qisi-nvue-table

## Basic Information

- **Project Name**: qisi-nvue-table
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-30
- **Last Updated**: 2021-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

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

# 插件使用

[点击跳转UNI插件市场](https://ext.dcloud.net.cn/plugin?name=qisi-nvue-table)

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

## 兼容
| App Vue | App Nvue | H5 |
| ------- | ------- |------- |
| √	  |  √    | √    |

## 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 |[]|表头数据，参考下面的属性|-|
| data |[]|数组数据，根据headers匹配的数据|-|
| border |true|是否显示最外层的边框和竖线|true/false|
| borderColor |#c8c7cc|边框的颜色，支持rgb格式|-|
| stripe |true|是否开启隔行变色|true/false|
| width |屏幕可视宽度|表格宽度，数字自动转换成px，字符串直接使用|例：0,100px,100rpx|
| height |400|表格高度，数字自动转换成px，字符串直接使用|例：0,100px,100rpx|
| showHeader |true|显示表头|true/false|
| showFooter |true|显示底部框，当slot name有footer的时候需要手动开启显示|true/false|
| showIndex |true|是否显示序号|true/false|
| type |空|选择模式，selection多选，single单选|selection/single|
| mustSelectOne |true|单选模式下是否永远存在一条数据被选中，注：开启点击被选中的行不会取消|true/false|
| openPage |true|开启分页，数据超过200条时强制开启分页，该属性失效|true/false|
| pageSize |20|每页展示数量，建议最多不少过200条|10-200|

### headers属性说明

					
| 属性名称 | 默认值 | 属性说明 | 可选值 |
| ------- | ------- | ------- | ------- |
| label |空|要显示的文字|-|
| type |空|字段类型，image显示图片,numberbox显示数字加减框|image,numberbox|
| key |空|数据里要展示的字段|-|
| width |auto|列宽，建议：只保留一列不设置width|-|
| align |left|对齐方式|center/left/right|


```
[
	{
		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
	},
]
```


## 事件

| 事件名称 |  事件说明 | 返回值 |
| ------- |  ------- | ------- |
|selection-change|选择发生变化时发送数据，单选多选都是这个方法返回数据|[rowData,rowData,...]|
|click-row|点击一行事件|index,row|
|number-box-change|存在数字框的时候会有这个事件|index,key,newValue|

## 方法

| 方法名称 |  方法说明 | 参数 |
| ------- |  ------- | ------- |
|setCurrentRow|单选时切换一行的选择状态，注意：mustSelectOne为true时不能取消选中|index|
|selectAll|选中全部，多选开启时有效||
|clearSelection|清除全部选中，多选开启时有效||
|toggleRowSelection|设置多行状态，多选开启时有效，传checked时设置为checked的值，不传反选|[index,index,...],checked|