FirstUI UNI版

Table 表格 VIP专属

概述

Table 表格，用于展示多条结构类似的数据。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5 PC 快手小程序 钉钉小程序
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

温馨提示

  • 组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。V1.9.9+

  • Nvue端暂不支持固定行列，仅支持头部固定，需要设置table高度才可生效（高度不可超过屏幕高度）。

  • 设置固定高度时，Nvue端行列不可同时滚动，如果需要同时可滚动，高度不设置值。

  • 支付宝小程序横向滚动与纵向滚动不支持同时生效，只能一个方向滚动。

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiTable from "@/components/firstui/fui-table/fui-table.vue"
export default {
	components:{
		fuiTable
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
图片元素

通过 itemList 属性设置table数据，header 属性设置表头数据。

<fui-table :itemList="tableData" :header="headerData"></fui-table>
1
data() {
	return {
		tableData: [{
			"name": "FirstUI 1",
			"province": "上海",
			"city": "普陀区"
		}, {
			"name": "FirstUI 2",
			"province": "上海",
			"city": "普陀区"
		}, {
			"name": "FirstUI 3",
			"province": "上海",
			"city": "普陀区"
		}, {
			"name": "FirstUI 4",
			"province": "上海",
			"city": "普陀区"
		}],
		//基础使用 表头
		headerData: [{
			prop: 'name',
			label: '名称'
		}, {
			prop: 'province',
			label: '省份'
		}, {
			prop: 'city',
			label: '城市'
		}]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
行列固定

通过 fixed 属性设置表头是否固定，height 属性设置表格高度，itemList 属性设置表格数据， header 属性设置表头。

<!-- #ifndef APP-NVUE -->
<fui-table fixed height="600" :itemList="itemList" :header="header" @click="detail"></fui-table>
<!-- #endif -->
1
2
3
//表头数据
header: [{
	prop: 'date',
	label: '日期',
	fixed: true,
}, {
	prop: 'name',
	label: '名称'
}, {
	prop: 'province',
	label: '省份'
}, {
	prop: 'city',
	label: '城市'
}, {
	prop: 'address',
	label: '地址',
	width: 320
}, {
	label: '操作',
	fixed: 'right',
	type: 3,
	width: 160,
	buttons: [{
		text: '详情',
		color: '#465CFF',
		// size: 30,
		fontWeight: 600
	}]
}]

//表格数据见示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# Slots

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 平台差异说明
header Array 表头数据，必选，具体属性见下方说明 [ ] -
show Boolean 是否显示表头 true -
size Number, String 表头字体大小 28 -
color String 表头字体颜色 #7F7F7F -
fontWeight Number, String 表头字中重 600 -
headerBgColor String 表头背景色 #fff -
fixed Boolean 表头是否固定，需要设置表格高度，且内容超过表格高度生效 false -
itemList Array 表格数据 [ ] -
full Boolean 表格宽度是否铺满剩余空间（宽度 < 屏幕宽度- gap*2时有效） false -
height Number, String 表格的高度，为0时默认为auto，单位rpx 0 -
gap Number, String 表格外层设置的左右padding值（距离屏幕左右侧距离），单位rpx 0 -
border Boolean 是否带有纵向边框 true -
horBorder Boolean 是否带有横向边框 true -
borderColor String 边框颜色 #eee -
background String 表格背景色，如果有固定项，不可设置透明 #fff -
stripe Boolean 是否为斑马纹table false -
stripeColor String 斑马纹颜色 #F8F8F8 -
textSize Number, String 表格内容字体大小，单位rpx 28 -
textColor String 表格内容字体颜色 #333 -
align String 单元格对齐方式:left/center/right center -
ellipsis Boolean 文字超出是否省略，默认换行 false -
padding Number, String 单元格上下padding值，单位rpx 20 -
selection V1.9.8+ Boolean 是否可进行多选操作 false -
initEmitChange V1.9.8+ Boolean 初始化数据时是否触发 @selectionChange 事件，仅selection为true时有效 false -
checkboxColor V1.9.8+ String checkbox 选中时背景颜色，仅selection为true时有效 #465CFF 非Nvue端可通过css变量 (--fui-color-primary) 修改
checkboxBorderColor V1.9.8+ String checkbox 未选中时边框颜色，仅selection为true时有效 #eee -
checkmarkColor V1.9.8+ String checkbox 选中时对号颜色，仅selection为true时有效 #fff -
emptyText V2.1.0+ String 表格数据为空[]时，显示的提示内容，空字符串则不显示 暂无数据 -
emptySize V2.1.0+ String, Number 提示文本字体大小，单位rpx 24 -
emptyColor V2.1.0+ String 提示文本字体颜色 #B2B2B2 -
//header 表头属性说明，约定属性
[{
	//表格内容类型：1-text 展示文本 2-image 展示图片 3-button 展示操作按钮,必选
	type: 1,
	//表头显示名称，可选，内容为空时显示prop
	label: '姓名',
	//当前列展示数据属性名，必选
	prop: 'name',
	//单元格宽度，单位rpx，必选
	width: 200,
	//当前列是否吸顶固定：true-左侧固定,left-左侧固定,right-右侧固定，可选
	fixed: true,
	//表头字体大小，单位rpx，优先级大于props中size值，可选
	size:30,
	//表头文字颜色，优先级大于props中color值，可选
	color: '',
	//单元格字体大小，单位rpx，优先级大于props中textSize值，可选
	textSize:30,
	//单元格文字颜色，优先级大于props中textColor值，可选
	textColor: '',
	//图片宽度，单位rpx ，type=2时有效
	imgWidth: 120,
	//图片高度度，单位rpx ，type=2时有效
	imgHeight: 120,
	//列单元格对齐方式:left/center/right，优先级大于props中align值，可选 【V1.8.0+】
	align:'',
	//按钮数据，，type=3时有效，可选
	buttons: [{
		//按钮文本
		text: '详情',
		//按钮文本颜色
		color: 'red',
		//按钮字体大小
		size: 30,
		//按钮字重
		fontWeight: 400
	}],
	//[可选] 是否开启排序 [V1.9.9+]
	sortable: true,
	//[开启排序后则必填] 排序数据类型，可选值：number/date/string [V1.9.9+] 
	sortType: 'date',
	//[可选] 排序图标颜色，不传值则使用默认值 [V1.9.9+]
	sortColor: '#465CFF',
	//[可选] 排序图标right值，默认40（单位rpx），根据列宽度自行调整至合适的位置 [V1.9.9+]
	sortRight:40,
	//[可选] 排序图标大小，单位rpx [V1.9.9+]
	sortSize:28
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

TIP

开启排序后请务必设置 sortType 值，详见上方说明，sortType 可选值见下方描述：

  • sortType
    • number number类型数据进行排序
    • date 日期类型的数据进行排序
    • string 中文字符串类型数据进行排序

目前仅支持这三种类型，设置排序后，该参数为必传参数。

# Events

事件名 说明 回调参数
@click 点击按钮时触发，表头数据type=3时有效 {
  index：数据行索引，
  item：对应数据行数据
  buttonIndex:按钮索引
}
@rowClick V1.6.0+ 点击行时触发 {
  index：数据行索引，
  item：对应数据行数据
}
@select V1.9.8+ 勾选行 Checkbox 时触发的事件 {
  index：数据行索引，
  item：对应数据行数据,
  is_selected：是否选中
}
@selectAll V1.9.8+ 勾选全选 Checkbox 时触发的事件 {
  is_selected：是否全选
}
@selectionChange V1.9.8+ 当选择项发生变化时会触发该事件 selection：选中数据
@sortChange V1.9.9+ 排序数据发生改变时触发 {
  itemList:排序后列表，
  sort：排序方式
  prop:排序属性字段
}

# Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。
方法名 说明 传入参数
columnColorMethod V1.8.0+ 根据值改变列文本颜色   fn：自定义处理方法
  prop：列属性/字段名
clearSelection V1.9.8+ 用于多选表格，清空用户的选择 -
toggleRowSelection V1.9.8+ 用于多选表格，切换某一行的选中状态   row：行数据
  selected：是否选中
toggleRowDisabled V1.9.8+ 用于多选表格，切换某一行的禁用状态   row：行数据
  disabled：是否禁用
toggleAllSelection V1.9.8+ 用于多选表格，切换所有行的选中状态 -
resetSort V1.9.9+ 用于有设置排序表格，重置所有排序 -
setSort V1.9.9+ 用于有设置排序表格，设置排序   prop：需要排序的字段
  sortOrder：排序方式
  (ascending/descending)
// columnColorMethod / setSort方法调用示例:
onReady() {
	//必须等组件加载完成后调用组件方法，刷新header数据时需重新执行方法
	this.$refs.tableRef && this.$refs.tableRef.columnColorMethod(this.columnNameColor,'name')
	
	//按日期降序（descending）排序（date 为表头中设置的 prop 值） V1.9.9+
	this.$refs.tableRef &&  this.$refs.tableRef.setSort('date','descending')
},
methods: {
	//自定义方法：根据值改变列的颜色 约定接收参数 value：列值，index:行索引
	columnNameColor(value, index) {
		let color = '#333'
		if (value && ~value.indexOf('3')) {
			color = '#465CFF' 
		}
		return color;
	}
}

/*
注：
1、toggleRowSelection 方法，如果不使用第二个参数则自动进行切换，
若使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

2、toggleRowDisabled 方法，如果不使用第二个参数则自动进行切换，
若使用了第二个参数，则是设置这一行禁用与否（disabled 为 true 则禁用选择）
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

特别说明

当属性 selection 设为true时，即为多选表格：

  • 设置初始选中除了调用 方法（toggleRowSelection）实现，还可以在 属性 itemList（表格数据）中，新增 is_selected 属性（Boolean类型，组件默认key，不可修改）来实现。
  • 设置数据行禁用选择除了调用方法（toggleRowDisabled）实现，还可以在 属性 itemList（表格数据）中，新增 is_disabled 属性（Boolean类型，组件默认key，不可修改）来实现。

以上数据需自行处理后再传入组件内。

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)

Last Updated: 10/7/2023, 10:16:53 AM

← Backtop 回到顶部 →