264 lines
5.0 KiB
Vue
264 lines
5.0 KiB
Vue
<script>
|
|
export default {
|
|
name: "TableView",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "表格"
|
|
},
|
|
// th是否居中
|
|
thCenter: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
rows: [
|
|
{
|
|
row: [
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
}
|
|
]
|
|
},
|
|
{
|
|
row: [
|
|
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
}
|
|
]
|
|
},
|
|
{
|
|
row: [
|
|
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
row: [
|
|
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
}
|
|
]
|
|
},
|
|
|
|
|
|
{
|
|
row: [
|
|
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
},
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 1
|
|
}
|
|
]
|
|
},
|
|
{
|
|
row: [
|
|
{
|
|
name: "选项",
|
|
value: "value",
|
|
height: 10
|
|
}
|
|
]
|
|
},
|
|
]
|
|
}
|
|
}
|
|
},
|
|
dataId: {}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
// 根据row元素数量计算宽度
|
|
thCenterStyle() {
|
|
return this.thCenter ? { textAlign: "center" } : {};
|
|
},
|
|
// 根据row元素的height计算高度
|
|
},
|
|
methods: {
|
|
rowClass(l){
|
|
return "row"+l
|
|
},
|
|
rowHeight(v) {
|
|
return { height: v.height * 40 + "px" };
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<h1> {{title}}</h1>
|
|
<div v-for="(item, index) in options" :key="index">
|
|
<div class="row" v-for="(value, key) in item" :key="key" :class="rowClass(value.row.length)">
|
|
<div class="cell" v-for="(v, k) in value.row" :key="k" :style="rowHeight(v)">
|
|
<span class="th" :style="thCenterStyle">
|
|
{{ v.name }}
|
|
</span>
|
|
<span class="td">
|
|
{{ v.value }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
border: 1px solid #ccc;
|
|
border-top:0px;
|
|
margin:10px;
|
|
h1{
|
|
padding: 5px 10px;
|
|
text-align: center;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
|
|
.cell {
|
|
height:40px;
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
span {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding: 10px 10px 10px 10px;
|
|
border-top: 1px solid #ccc;
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
.th {
|
|
background: #f5f7fa;
|
|
border-left:0px;
|
|
}
|
|
.td{
|
|
background: #ffffff;
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
}
|
|
}
|
|
.row1{
|
|
.th {
|
|
width: 12.5%*1;
|
|
}
|
|
.td{
|
|
width: 12.5%*7;
|
|
}
|
|
}
|
|
.row2{
|
|
.th {
|
|
width: 12.5%*2;
|
|
}
|
|
.td{
|
|
width: 12.5%*6;
|
|
}
|
|
}
|
|
.row3{
|
|
.th {
|
|
width: 12.5%*3;
|
|
}
|
|
.td{
|
|
width:12.5%*5;
|
|
}
|
|
}
|
|
.row4{
|
|
.th {
|
|
width: 12.5%*4;
|
|
}
|
|
.td{
|
|
width: 12.5%*4;
|
|
}
|
|
}
|
|
.row5{
|
|
.th {
|
|
width: 12.5%*5;
|
|
}
|
|
.td{
|
|
width: 12.5%*3;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |