参考别的大大写两种方法 zhuanlan.zhihu.com/p/365209210
<template>
<div id="app">
<el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index">
<div class="box">
<div class="content1">{{ item.key }}</div>
<div class="content2">{{ item.value == "" ? "待完善" : item.value }}</div>
</div>
</el-col>
</div>
</template>
<script>
export default {
data() {
return {
tableArr: [
{
key: "姓名",
value: "孙悟空",
},
{
key: "年龄",
value: 500,
},
{
key: "身高",
value: "山一样高",
},
{
key: "性别",
value: "男",
},
{
key: "住址",
value: "花果山水帘洞",
},
{
key: "学历",
value: "天庭弼马温学历",
},
{
key: "能力",
value: "强",
},
{
key: "外号",
value: "齐天大圣",
},
],
howWidth: 8,
};
},
methods: {},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding: 50px;
.box {
width: 100%;
height: 40px;
display: flex;
border-left: 1px solid #e9e9e9;
border-top: 1px solid #e9e9e9;
.content1 {
width: 40%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fafafa;
border-right: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
color: #333;
font-size: 14px;
}
.content2 {
width: 60%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fff;
border-right: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
color: #b0b0b2;
font-size: 14px;
}
}
}
</style>
