feat: 首次提交
This commit is contained in:
157
pages/component/expand/table/table.vue
Normal file
157
pages/component/expand/table/table.vue
Normal 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>
|
161
pages/component/expand/table/tableData.js
Normal file
161
pages/component/expand/table/tableData.js
Normal 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
|
||||
}
|
Reference in New Issue
Block a user