<template>
<div class="wrapper">
<div
v-for="(item, index) in tableData"
:key="index"
:class="[
'box',
item.isTitle ? 'box-title' : item.isThcenfTitle ? '' : 'box-content',
item.isColor ? 'color' : '',
]"
>
{{ item.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ label: "公司主体", isTitle: true },
{ label: "范同学", isTitle: false, isColor: true },
{ label: "申请人", isTitle: true },
{ label: "xxxxxx", isTitle: false, isThcenfTitle: true },
{ label: "申请日期", isTitle: false, isThcenfTitle: true },
{ label: "xxxxxx", isTitle: false, isThcenfTitle: true },
{ label: "申请部门", isTitle: false, isThcenfTitle: true },
{ label: "xxxxxx", isTitle: false, isThcenfTitle: true },
{ label: "工单类型", isTitle: true },
{ label: "xxxxxx", isTitle: false, isThcenfTitle: true },
{ label: "开始时间", isTitle: false, isThcenfTitle: true },
{ label: "xxxxxx",isTitle: false,isThcenfTitle: true,isColor: true },
{ label: "结束时间", isTitle: false, isThcenfTitle: true },
{ label: "xxxxxx",isTitle: false,isThcenfTitle: true,isColor: true },
{ label: "场地名称", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false, isColor: true },
{ label: "工作类型描述", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false, isColor: true },
{ label: "器件", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false },
{ label: "器件", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false },
{ label: "图片", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false },
{ label: "旧件处置措施", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false },
{ label: "特定推送人", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false },
{ label: "确认到货", isTitle: true },
{ label: "xxxxxxxxxxxx", isTitle: false },
],
};
},
};
</script>
<style>
/* 表格设置列、设置行高、设置表格总宽 */
.wrapper {
width: 980px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 50px;
}
.box {
background-color: #ffffff;
border: 1px solid #333;
text-align: center;
line-height: 50px;
}
/* 标题 */
.box-title {
grid-column-start: 1;
}
/* 内容:正常长度的内容 */
.box-content {
grid-column-start: 2;
grid-column-end: 7;
}
.color {
background-color: bisque;
}
</style>
特殊表格的方法
于 2024-08-29 13:30:42 首次发布