feat: 首次提交

2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
--- a/pages/component/expand/table/table.vue
+++ b/pages/component/expand/table/table.vue
@ -0,0 +1,157 @@
+<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1    4 0 725   49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
+<template>
+	<view class="fui-wrap">
+		<view class="fui-page__hd">
+			<view class="fui-page__title fui-align__center" @tap="vip">Table <image
+					src="/static/images/index/light/icon_member_3x.png"></image>
+			</view>
+			<view class="fui-page__desc">Table 表格，用于展示多条结构类似的数据。</view>
+		</view>
+		<view class="fui-page__bd">
+			<view class="fui-section__title">基础使用</view>
+			<fui-table :itemList="tableData" :header="headerData" ref="tableRef"></fui-table>
+			<view class="fui-section__title">横向铺满/斑马纹</view>
+			<fui-table full stripe :itemList="tableData" :header="headerData" @rowClick="rowClick"></fui-table>
+			<!-- #ifndef APP-NVUE -->
+			<view class="fui-section__title">行列固定/排序</view>
+			<fui-table ref="sortTable" fixed height="600" :itemList="itemList" :header="header" @click="detail" @sortChange="sortChange"></fui-table>
+			<!-- #endif -->
+
+			<view class="fui-section__title">多选/禁用选择/默认选中</view>
+			<!--如果需要初始化时触发 @selectionChange 事件，将属性 initEmitChange 设为true-->
+			<fui-table ref="table" selection full :itemList="tableData" :header="headerData"
+				@selectionChange="change"></fui-table>
+
+			<view class="fui-flex__center fui-flex__column">
+				<fui-button type="gray" btn-size="medium" text="切换第三行选中状态" bold :margin="['48rpx','0','24rpx']"
+					@click="toggleSelection(tableData[2])"></fui-button>
+				<fui-button type="gray" btn-size="medium" text="取消所有选择" bold @click="clearSelection"></fui-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import data from './tableData.js'
+	export default {
+		data() {
+			return {
+				tableData: data.table,
+				itemList: data.itemList,
+				//基础使用 表头
+				headerData: [{
+					prop: 'name',
+					label: '名称'
+				}, {
+					prop: 'province',
+					label: '省份'
+				}, {
+					prop: 'city',
+					label: '城市'
+				}],
+				header: [{
+					prop: 'date',
+					label: '日期',
+					fixed: true,
+					//是否开启排序
+					sortable: true,
+					//排序图标颜色，颜色不传值则使用默认值
+					sortColor: '#465CFF',
+					//必传：排序数据类型
+					sortType: 'date',
+					//排序图标right值，默认40（单位rpx），根据列宽度自行调整至合适的位置
+					// sortRight:40
+				}, {
+					prop: 'ranking',
+					label: '名次',
+					sortable: true,
+					sortColor: '#465CFF',
+					sortType: 'number'
+				}, {
+					prop: 'province',
+					label: '省份',
+					sortColor: '#465CFF',
+					sortable: true,
+					sortType: 'string'
+				}, {
+					prop: 'city',
+					label: '城市'
+				}, {
+					prop: 'address',
+					label: '地址',
+					width: 320
+				}, {
+					label: '操作',
+					fixed: 'right',
+					type: 3,
+					width: 160,
+					buttons: [{
+						text: '详情',
+						color: '#465CFF',
+						// size: 30,
+						fontWeight: 600
+					}]
+				}]
+			}
+		},
+		onReady() {
+			// const date=String(new Date('2020'))
+			// this.fui.toast(date)
+			//必须等组件加载完成后调用组件方法，刷新header数据时需重新执行方法
+			this.$refs.tableRef && this.$refs.tableRef.columnColorMethod(this.columnNameColor, 'name')
+			this.$refs.tableRef && this.$refs.tableRef.columnColorMethod(this.columnCityColor, 'city')
+		},
+		methods: {
+			vip() {
+				this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
+			},
+			//根据值改变列的颜色 约定接收参数 value：列值，index:行索引
+			columnNameColor(value, index) {
+				let color = '#333'
+				if (value && ~value.indexOf('3')) {
+					color = '#465CFF'
+				}
+				return color;
+			},
+			//根据值改变列的颜色 约定接收参数 value：列值，index:行索引
+			columnCityColor(value, index) {
+				let color = '#333'
+				if (value && ~value.indexOf('浦东')) {
+					color = '#465CFF'
+				}
+				return color;
+			},
+			//行点击
+			rowClick(e) {
+				console.log(e)
+			},
+			detail(e) {
+				console.log(e)
+				this.fui.toast(e.item.province)
+			},
+			change(e) {
+				console.log(e)
+			},
+			toggleSelection(row) {
+				this.$refs.table && this.$refs.table.toggleRowSelection(row)
+			},
+			clearSelection() {
+				this.$refs.table && this.$refs.table.clearSelection()
+			},
+			sortChange(e){
+				//排序数据发生改变时触发
+				console.log(e)
+			}
+		}
+	}
+</script>
+
+<style>
+	.fui-wrap {
+		padding-bottom: 120rpx;
+	}
+
+	.fui-section__title {
+		margin-left: 32rpx;
+	}
+</style>