<template>
<view class="tm-table" >
<scroll-view v-if="fixedHeader" :scroll-with-animation="true" :scroll-left="scrollx_px_header" @scroll="scrollChange($event,'header')" scroll-x="" class="tm-table-scroll tm-table-scroll-body fulled">
<view class=" tm-table-scroll-header">
<tm-row v-if="listdata.header.length>0" preatClass="tm-table-header " style="white-space: nowrap;">
<block v-for="(item,index) in listdata.header" :key="index">
<tm-col :maxCol="maxGrid" :grid="item['grid']?item.grid:col"
:color="(listdata.headerBgcolor?listdata.headerBgcolor:item.color)+ (black_tmeme?' bk ':'')"
custom-class="" :padding="5">
<view @click="rank(index)" class="text-size-s vertical-align-middle text-weight-b text-overflow-1 flex-center"
style="white-space: initial;height: 36px;">
<view class="flex-center vertical-align-middle fulled-height">
<text>{{item[rangKey]}}</text>
<view v-if="item['sort']" class="flex-col flex-center pl-10 flex-shrink" style="line-height: 0;">
<text :class="[index==rank_index&&rank_type==0?'':'opacity-6']" class="iconfont icon-sort-up text-size-xs "></text>
<text :class="[index==rank_index&&rank_type==1?'':'opacity-6']" class="iconfont icon-sort-down text-size-xs mt-14"></text>
</view>
</view>
</view>
</tm-col>
</block>
</tm-row>
</view>
</scroll-view>
<scroll-view :scroll-with-animation="true" :scroll-left="scrollx_px_body" @scroll="scrollChange($event,'body')" scroll-x :scroll-y="height_s?true:false" class="tm-table-scroll tm-table-scroll-body fulled"
:style="{
height:height_s?`${height_s}px`:'auto'
}">
<view v-if="!fixedHeader" class=" tm-table-scroll-header">
<tm-row v-if="listdata.header.length>0" preatClass="tm-table-header " style="white-space: nowrap;">
<block v-for="(item,index) in listdata.header" :key="index">
<tm-col :maxCol="maxGrid" :grid="item['grid']?item.grid:col"
:color="(listdata.headerBgcolor?listdata.headerBgcolor:item.color)+ (black_tmeme?' bk ':'')"
custom-class="" :padding="5">
<view @click="rank(index)" class="text-size-s vertical-align-middle text-weight-b text-overflow-1 flex-center"
style="white-space: initial;height: 36px;">
<view class="flex-center vertical-align-middle fulled-height">
<text>{{item[rangKey]}}</text>
<view v-if="item['sort']" class="flex-col flex-center pl-10 flex-shrink" style="line-height: 0;">
<text :class="[index==rank_index&&rank_type==0?'':'opacity-6']" class="iconfont icon-sort-up text-size-xs "></text>
<text :class="[index==rank_index&&rank_type==1?'':'opacity-6']" class="iconfont icon-sort-down text-size-xs mt-14"></text>
</view>
</view>
</view>
</tm-col>
</block>
</tm-row>
</view>
<block v-for="(item,index) in listdata.col" :key="index">
<tm-row v-if="listdata.col.length>0" preatClass="tm-table-header" style="white-space: nowrap;">
<block v-for="(item2,index2) in item" :key="index2">
<tm-col
:maxCol="maxGrid"
:grid="item2['grid']?item2['grid']:(listdata.header[index2]['grid']?listdata.header[index2]['grid']:col)"
:color="item2.color?item2.color:(listdata.header[index2].color?listdata.header[index2].color+' text':(item2.color?item2.color+' text':((index+1)%2?activeCellColorRow+' text':'white'))) + (black_tmeme?' bk ':'')">
<view @click="onclick(index,index2,item2)"
class="text-size-s border-grey-lighten-3-b-1 flex-center wrap fulled-height overflow"
:class="black_tmeme?' bk ':''"
:style="{height: `${rowHeight}rpx`}">
<view class=" overflow fulled fulled-height " :class="(item2['rowAlign']||listdata.header[index2]['rowAlign']||rowAlign)">
<slot name="cell" :data="{parentIndex:index,childrenIndex:index2,data:item2}">
<text class="pa-10">{{item2[rangKey]}}</text>
</slot>
</view>
</view>
</tm-col>
</block>
</tm-row>
</block>
</scroll-view>
</view>
</template>
<script>
/**
* 表格
* @property {Number} height = [] 默认：0，表格的整体高度，如果设定了高度，超过后变为滚动。
* @property {Number} col = [] 默认：0，默认的列宽，记住是1-12列
* @property {Boolean} fixedHeader = [] 默认：false，是否固定顶部表头
* @property {String} activeCellColorRow = [] 默认：blue，默认高亮的行颜色
* @property {String} rang-key = [] 默认：text，list对象时读取文本的字段，默认text
* @property {Number} rowHeight = [] 默认：72，单元格的高度。单位rpx
* @property {Array} rowAlign = [] 默认：'flex-center'，
* 单元格对齐方式本库类，也可能通过单元格数据对齐覆盖此全局变量，以控制单个的对齐方式
* @property {Number} maxGrid = [] 默认：12,布局的列表，比如我想一行5个，就可以用到此属性，设置为10，然后grid=2即可。
* @property {String} sort-key = [] 默认：text，默认text即rangKey字段进行排序。排序的字段名称。
* @property {Object} list = [] 默认：{}，list数据格式见文档
* @example <tm-search-table.vue :list="list2"></tm-search-table.vue>
*/
import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
export default {
components: {
tmRow,
tmCol,
tmIcons
},
name: "tm-table",
props: {
height: {
type: Number,
default: 0
},
black: {
type: Boolean | String,
default: null
},
// 默认的列宽
col: {
type: Number,
default: 3
},
// 默认高亮的单元格。
activeCellColorRow: {
type: String,
default: 'primary'
},
// 对象时读取文本的字段，默认text
rangKey: {
type: String,
default: 'text'
},
sortKey:{
type:String,
default:'text'
},
list: {
type: Object,
default: () => {
return {};
}
},
//默认计算方式是12列布局。
maxGrid:{
type:Number,
default:12
},
fixedHeader:{
type:Boolean|String,
default:false,
},
rowHeight:{
type:Number,
default:72
},
rowAlign:{
type:String,
default:'flex-center'
}
},
data() {
return {
scrollx_px_header: 0,
scrollx_px_body: 0,
scrollx_obj: null,
orderlist: null,
rank_index:null,
rank_type:2,
list_default: {
header: [], //头部数据
col: [], //行的数据
headerBgcolor: 'primary', //头部的背景颜色
}
};
},
created() {
this.listdata = this.list;
},
watch:{
list:{
deep:true,
handler(){
this.listdata = this.list;
}
}
},
computed: {
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
listdata: {
get: function() {
return this.orderlist||this.list_default;
},
set: function(val) {
let list = {
...this.list_default,
...val
};
this.orderlist = uni.$tm.deepClone(list);
}
},
height_s: function() {
return uni.upx2px(this.height);
}
},
methods: {
rank(index, type) {
if(!this.listdata.header[index]['sort']){
return;
}
let t = this;
let list = uni.$tm.deepClone(this.listdata);
this.rank_index = index;
if(this.rank_type==0){
let str = this.listdata.col[0][index][t.rangKey]
if(/^[0-9]+(.[0-9]{0,})?$/g.test(str)){
list.col.sort((a,b)=>b[index][t.sortKey]-a[index][t.sortKey])
this.rank_type = 1
}else{
list = this.list
this.rank_type = 2
}
this.listdata = list;
return;
}else if(this.rank_type==1){
this.listdata = this.list;
this.rank_type = 2
return;
}else{
this.rank_type = 0
let str = this.listdata.col[0][index][t.rangKey]
if(/^[0-9]+(.[0-9]{0,})?$/g.test(str)){
list.col.sort((a,b)=>a[index][t.sortKey]-b[index][t.sortKey])
}else{
list.col.reverse()
}
this.listdata = list;
return;
}
},
scrollChange(e,type){
if(type=='header'){
this.scrollx_px_body = e.detail.scrollLeft
}else if(type=="body"){
this.scrollx_px_header = e.detail.scrollLeft
}
},
onclick(index, index2, item) {
this.$emit("click", {
row: index,
col: index2,
data: item
})
}
}
}
</script>
<style lang="less" scoped>
.tm-table {
.tm-table-scroll-header {
position: relative;
z-index: 2;
.tm-header-body {}
}
.tm-table-scroll-body {
position: relative;
z-index: 1;
}
}
.tm-table-header {
flex-flow: nowrap !important;
white-space: nowrap !important;
display: flex;
flex-flow: row nowrap;
.tm-col {
flex-shrink: 0;
height: 100%;
}
}
</style>