TMRAppBle/components/lanyun-table.stml

112 lines
2.8 KiB
Plaintext
Raw Normal View History

2023-10-19 15:00:17 +08:00
<template>
<scroll-view class="lanyun-table" :scroll-x="this.data.scrollX">
<view class="lanyun-table__table">
<view class="lanyun-table__thead">
<view class="lanyun-table__tr">
<view class="lanyun-table__th" v-for="item in this.data.list['header']">
<text class="lanyun-table__thead__th" :style="{textAlign: this.data.align}">{item}</text>
</view>
</view>
</view>
<view class="lanyun-table__tbody">
<view class="lanyun-table__tr" v-for="(item, index) in this.data.list['body']" :style={this.indexOfdata(index)}>
<view class="lanyun-table__th" v-for="(val,key) in item">
<text class="lanyun-table__tbody__th" :style={this.fontColor(index)}>{val}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
name: 'lanyun-table',
computed: {
},
data(){
return {
scrollX: false,
childColor: this.props['child-color'] || {
'color': '#fff',
'backgroundColor': '#eee'
},
align: this.props['align'] || 'center',
list: this.props['list'] || {}
}
},
methods: {
indexOfdata(index){
let a = index % 2 == 1 ? this.data.childColor : {}
return a;
},
fontColor(index){
let a = {}
let obj = {
'textAlign': this.data.align,
'color': a['color'] ? a['color'] : '#333'
};
//console.log(JSON.stringify(obj));
return obj
}
},
mounted(){
console.log(JSON.stringify(this.data.childColor));
}
}
</script>
<style scoped>
.lanyun-table{
margin-bottom: 0 10px;
}
.lanyun-table__table{
width: auto;
height: auto;
background-color: #eee;
border: 1px solid #999;
}
.lanyun-table__thead{
width: 100%;
height: 30px;
}
.lanyun-table__tr{
width: 100%;
height: 30px;
flex-direction: row;
align-items: center;
}
.lanyun-table__th{
height: 30px;
border-left: 1px solid #333;
border-top: 1px solid #333;
flex: 1;
}
.lanyun-table__thead__th{
height: 30px;
line-height: 30px;
font-size: 18px;
}
.lanyun-table__tbody{
background-color: #fff;
}
.lanyun-table__tbody__tr__even{
background-color: #eee;
}
.lanyun-table__tbody__th{
height: 30px;
line-height: 30px;
font-size: 16px;
}
</style>