112 lines
2.8 KiB
Plaintext
112 lines
2.8 KiB
Plaintext
|
<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>
|