feat: 首次提交

This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions

View File

@ -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>

View File

@ -0,0 +1,161 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司手机号 18 6 14 0 72 5 4 9身份证尾号5A07X5专用请尊重知识产权勿私下传播违者追究法律责任。
let itemList = [{
"date": "2022-09-02",
"ranking": 5,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1518 弄"
}, {
"date": "2022-09-01",
"ranking": 3,
"province": "北京",
"city": "北京市",
"address": "北京市朝阳区罗马花园b座903a室"
}, {
"date": "2022-09-03",
"ranking": 4,
"province": "广东",
"city": "深圳市",
"address": "深圳市福田区 街道 皇兴大厦"
}, {
"date": "2022-09-04",
"ranking": 2,
"province": "广东",
"city": "广州市",
"address": "广州市天河南街道体育西路183号"
}, {
"date": "2022-09-05",
"ranking": 1,
"province": "安徽",
"city": "合肥市",
"address": "安徽省合肥市包河区马鞍山路99号"
}, {
"date": "2022-09-06",
"ranking": 6,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1517 弄"
}, {
"date": "2022-09-07",
"ranking": 7,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1519 弄"
}, {
"date": "2022-09-08",
"ranking": 8,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1516 弄"
}, {
"date": "2022-09-09",
"ranking": 11,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1518 弄"
}, {
"date": "2022-09-10",
"ranking": 10,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1517 弄"
}, {
"date": "2022-09-11",
"ranking": 9,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1519 弄"
}, {
"date": "2022-09-12",
"ranking": 12,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1516 弄"
}, {
"date": "2022-09-13",
"ranking": 13,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1518 弄"
}, {
"date": "2022-09-14",
"ranking": 16,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1517 弄"
}, {
"date": "2022-09-15",
"ranking": 15,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1519 弄"
}, {
"date": "2022-09-16",
"ranking": 14,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1516 弄"
}, {
"date": "2022-08-01",
"ranking": 19,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1518 弄"
}, {
"date": "2022-08-02",
"ranking": 18,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1517 弄"
}, {
"date": "2022-08-03",
"ranking":17,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1519 弄"
}, {
"date": "2022-08-04",
"ranking":20,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1516 弄"
}, {
"date": "2022-08-05",
"ranking": 22,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1518 弄"
}, {
"date": "2022-08-06",
"ranking": 21,
"province": "上海",
"city": "普陀区",
"address": "上海市普陀区金沙江路 1517 弄"
}]
let table = [{
"name": "FirstUI 1",
"province": "上海",
"city": "普陀区",
//禁用选择
'is_disabled':true
}, {
"name": "FirstUI 2",
"province": "上海",
"city": "浦东新区",
//默认选中
'is_selected':true
}, {
"name": "FirstUI 3",
"province": "上海",
"city": "静安区"
}, {
"name": "FirstUI 4",
"province": "上海",
"city": "宝山区"
}]
export default {
table,
itemList
}