118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
<template>
|
|
<uni-row>
|
|
<view v-for="(item, index) in data">
|
|
<uni-col :span="item.titleSpan">
|
|
<view class="titleStyle">
|
|
{{ item.title }}
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="item.valueSpan">
|
|
<view :class="item.class">
|
|
{{ doEmptyString(item.value) }}
|
|
</view>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 表格数据
|
|
cellData: {
|
|
type: Object,
|
|
default: () => [
|
|
{
|
|
title: '',
|
|
value: '',
|
|
titleSpan: 4,
|
|
valueSpan: 4
|
|
}
|
|
]
|
|
},
|
|
//每行数据组数 title value
|
|
rowDataCount: {
|
|
type: Number,
|
|
default: 3
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
data: []
|
|
};
|
|
},
|
|
watch: {
|
|
cellData: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(val) {
|
|
let totalSpan = 0;
|
|
for (var i = 0; i < val.length; i++) {
|
|
//根据每行数据组数 补齐栅格 24
|
|
if ((i + 1) % this.rowDataCount != 0) {
|
|
totalSpan = totalSpan + val[i].titleSpan + val[i].valueSpan;
|
|
} else {
|
|
val[i].valueSpan = 24 - totalSpan - val[i].titleSpan;
|
|
totalSpan = 0;
|
|
}
|
|
}
|
|
this.data = val;
|
|
// console.log(this.data)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//数据如果为空，自动替换成/
|
|
doEmptyString(obj) {
|
|
let str = '/';
|
|
if (typeof obj == 'undefined' || obj === null || obj === '' || obj === 'Na' || obj === 'N' || obj === '0') {
|
|
return str;
|
|
}
|
|
return obj + '';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/* 标签样式 */
|
|
.titleStyle {
|
|
font-size: 12px;
|
|
color: #747474;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
background: #f2f9fc;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-left: 1px solid #919191;
|
|
border-right: 1px solid #919191;
|
|
border-bottom: 1px solid #919191;
|
|
}
|
|
|
|
/* 内容样式 */
|
|
.dataStyle {
|
|
font-size: 14px;
|
|
color: #00007f;
|
|
line-height: 35px;
|
|
height: 30px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #919191;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 内容样式 */
|
|
.dataStyle1 {
|
|
font-size: 12px;
|
|
color: #00007f;
|
|
line-height: 15px;
|
|
height: 30px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #919191;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|