README.md · 张相军/osce-ipad

# Vue2版本！！！
> vue3版本请前往：[https://gf.bilibili.com/item/detail/1105938011](https://gf.bilibili.com/item/detail/1105938011)

## uniapp table多功能表格组件【增强版】
> **组件名：uaTable**
> 代码块： `<ua-table>`

uaTable表格组件是基于uni-app自定义加强版表格组件，支持固定表头/列、斑马纹、单选/多选，编译兼容H5+小程序端+App端。

### 引入方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，只需将`ua-table`组件放在components目录，在页面`template`中即可直接使用。

### 基本用法

**示例**

- 基础用法

```html
<ua-table :columns="columns" :data="list" />
```

- 自定义斑马纹样式

```html
<ua-table
	:columns="columns"
	:data="data.list"
	stripe
	padding="5px 0"
	height="450rpx"
/>
```

- 自定义表头样式、列背景

```js
<script>
export default {
	data(){
		return {
			columns: [
				// 索引序号
				{type: 'index', align: 'center', width: 100, fixed: true},
				// 自定义列背景
				{prop: 'keyword', label: '话题词', align: 'left', width: '350', bgcolor: '#e5fbff'},
				{prop: 'hits', label: '点击率', align: 'center', width: 120},
			],
			data: Mock.mock({
				total: 100,
				page: 1,
				pagesize: 10,
				'list|10': [
					{
						id: '@id()',
						keyword: '@ctitle(10, 20)',
						hits: '@integer(1000,10000)'
					}
				]
			})
		}
	}
}
</script>
```

```html
<ua-table 
	:columns="columns"
	:data="data.list"
	:headerBold="true"
	headerBgColor="#eee"
	padding="5px 0"
	height="500rpx"
/>
```

- 综合表格(自定义插槽、固定表头/列)

```js
<script>
export default {
	data(){
		return {
			columns: [
				{type: 'selection', align: 'center', width: 80, fixed: true}, // 多选
				{type: 'index', align: 'center', width: 80, fixed: true}, // 索引序号
				{prop: 'author', label: '作者', align: 'center', width: 120},
				{prop: 'title', label: '标题', align: 'left', width: 350},
				{slot: 'image', label: '图片', align: 'center', width: 120},
				{slot: 'switch', label: '推荐', align: 'center', width: 100},
				{slot: 'tags', label: '标签', align: 'center', width: 100},
				{slot: 'progress', label: '热度', align: 'center', width: 150},
				{prop: 'date', label: '发布时间', align: 'left', width: 300}, // 时间
				{slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作
			],
			data: Mock.mock({
				total: 100,
				page: 1,
				pagesize: 10,
				'list|30': [
					{
						id: '@id()',
						author: '@cname()',
						title: '@ctitle(10, 20)',
						image: 'https://picsum.photos/400/400?random=' + '@guid()',
						switch: '@boolean()',
						'tags|1': ['admin', 'test', 'dev'],
						progress: '@integer(30, 90)',
						date: '@datetime()'
					}
				]
			})
		}
	}
}
</script>
```

```html
<ua-table
	:columns="columns"
	:data="data.list"
	:stripe="true"
	:headerBold="true"
	headerBgColor="#1fd8a5"
	headerColor="#ff0"
	@row-click="handleRowClick"
	@select="handleCheck"
	height="750rpx"
	style="border:1px solid #eee"
>
	<template #default="{row, col, index}">
		<block v-if="col.slot == 'image'">
			<image :src="row.image" :lazy-load="true" mode="heightFix" style="width: 100rpx; height: 100rpx; background-color: #eee;" @click.stop="previewImage(row.image)" />
		</block>
		<block v-if="col.slot == 'switch'">
			<switch :checked="row.switch" color="#1fb925" style="transform:scale(0.7)" @click.stop></switch>
		</block>
		<block v-if="col.slot == 'tags'">
			<uni-tag :text="row.tags" circle type="primary" size="mini"  style="transform:scale(0.7)" />
		</block>
		<block v-if="col.slot == 'progress'">
			<progress active-color="#ff557f" :percent="row.progress" style="width: 100%;"></progress>
		</block>
		<block v-if="col.slot == 'btns'">
			<text style="color: #09f;text-decoration: underline;">编辑</text>
			<view style="margin: 0 2px;"></view>
			<text style="color: #09f;text-decoration: underline;" @click.stop="handleDel(row, index)">删除</text>
		</block>
	</template>
</ua-table>
```

### API

### uaTable Props

#### columns参数

- bgcolor	列背景色
- type		对应列类型	selection/index
- prop		对应列内容的字段名
- label		显示的列标题
- align		对齐方式	left/center/right
- width		对应列宽度
- fixed		列是否固定左侧或右侧	true/left/right 为true表示固定左侧
- slot		列自定义具名插槽

### 事件
- @row-click	点击行触发
- @select		多选/单选

### 💝最后

开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️

张相军/osce-ipad

简介

发行版

贡献者

近期动态

张相军/osce-ipad .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

张相军/osce-ipad