特殊表格的方法

范同学~

已于 2024-08-29 13:34:12 修改

阅读量102

点赞数 3

文章标签：前端 javascript html

于 2024-08-29 13:30:42 首次发布

本文链接：https://blog.csdn.net/weixin_46041322/article/details/141676378

版权

<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>