table 常见属性及跨行跨列

table 常用属性

width - 宽度

• 传值为百分比或具体尺寸
• 表格横向内容默认为弹性布局
• 如图设置宽度为 400 (默认绘制成 400px)

• 如图设置为 80%

height - 高度

• 传值为百分比 (从父元素继承) 或具体尺寸
• 除去 thead 部分，剩余高度默认弹性布局
• 如图为 thead 部分添加背景色，可看出整体 table 高度为 height 设置的值，剩余部分由 tbody 部分占用

border - 边框

• 表格及单元格的边框
• 如图设置边框为 1

cellspacing - 单元格间距

• 单元格与单元格之间的空隙，可设置为0

cellpadding - 单元格内边距

• 单元格内部 padding 值
  

跨行跨列

rowspan

• 单元格纵向占用多行

colspan

• 单元格横向占用多列

<table border="1" cellspacing="0" cellpadding="20">
   <thead>
     <tr>
       <th rowspan="2">大类</th>
       <th rowspan="2">小类</th>
       <th colspan="2">订单号</th>
       <th colspan="1">库存量</th>
       <th colspan="2">消费额</th>
     </tr>
     <tr>
       <th>商城订单</th>
       <th>个人订单</th>
       <th>库存量</th>
       <th>商城消费</th>
       <th>个人消费</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
       <td>6</td>
       <td>7</td>
     </tr>
     <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
       <td>6</td>
       <td>7</td>
     </tr>
   </tbody>
 </table>

跨行跨列实例

<template>
  <div class="center">
    <table cellspacing="0" cellpadding="0" width="1200px" height="500px">
      <thead>
        <tr>
          <th rowspan="2" class="rowGray">大类</th>
          <th rowspan="2" class="rowGray">小类</th>
          <th colspan="2">订单号</th>
          <th colspan="1">库存量</th>
          <th colspan="2">消费额</th>
        </tr>
        <tr>
          <th>商城订单</th>
          <th>个人订单</th>
          <th>库存量</th>
          <th>商城消费</th>
          <th>个人消费</th>
        </tr>
      </thead>
      <tbody v-for="(item1, index1) in tableData" :key="index1">
        <tr v-for="(item2, index2) in item1.child" :key="index2">
          <td v-if="index2 == 0" :rowspan="item1.child.length" class="rowGray">
            {{ item1.name }}
          </td>
          <td class="rowGray2">{{ item2.name }}</td>

          <td
            :class="{
              default: item2.data[item] < 250,
              red: 250 <= item2.data[item] && item2.data[item] < 500,
              green: 500 <= item2.data[item],
            }"
            v-for="(item, index) in headTitle"
            :key="index"
          >
            {{ item2.data[item] }}
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr class="total">
          <td colspan="2">合计</td>
          <td
            :class="{
              default: total[item] < 250 * 7,
              red: 250 * 7 <= total[item] && total[item] < 500 * 7,
              green: 500 * 7 <= total[item],
            }"
            v-for="(item, index) in headTitle"
            :key="index"
          >
            {{ total[item] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: "dashBoard",
  components: {},
  data() {
    return {
      total: {
        storeId: 0,
        personId: 0,
        residue: 0,
        storeCount: 0,
        personCount: 0,
      },
      tableData: [
        {
          level: 1,
          name: "电子产品",
          child: [
            { lavel: 2, name: "手机", data: {} },
            { lavel: 2, name: "电脑", data: {} },
          ],
        },
        {
          level: 1,
          name: "大型家电",
          child: [
            { lavel: 2, name: "电视机", data: {} },
            { lavel: 2, name: "洗衣机", data: {} },
          ],
        },
        {
          level: 1,
          name: "家居生活",
          child: [
            { lavel: 2, name: "衣柜", data: {} },
            { lavel: 2, name: "餐桌", data: {} },
          ],
        },
        {
          level: 1,
          name: "日化服饰",
          child: [{ lavel: 2, name: "化妆品", data: {} }],
        },
      ],
      headTitle: [
        "storeId",
        "personId",
        "residue",
        "storeCount",
        "personCount",
      ],
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      this.tableData.forEach((item1, index1) => {
        item1.child.forEach((item2, index2) => {
          item2.data.storeId = (Math.random() * 1000).toFixed(0);
          item2.data.personId = (Math.random() * 1000).toFixed(0);
          item2.data.residue = (Math.random() * 1000).toFixed(0);
          item2.data.storeCount = (Math.random() * 1000).toFixed(0);
          item2.data.personCount = (Math.random() * 1000).toFixed(0);
        });
      });
      this.tableData.forEach((item1, index1) => {
        item1.child.forEach((item2, index2) => {
          this.total.storeId += item2.data.storeId * 1;
          this.total.personId += item2.data.personId * 1;
          this.total.residue += item2.data.residue * 1;
          this.total.storeCount += item2.data.storeCount * 1;
          this.total.personCount += item2.data.personCount * 1;
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.center {
  padding: 50px 20px;
  background: #f7f7f7;
  table {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    thead {
      tr {
        height: 50px;
        th {
          border-left: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
          color: #333;
        }
        &:nth-child(1) {
          th {
            background: #ebe7b4;
            &.rowGray {
              background: #c6f3c3;
            }
            &:nth-child(1) {
              border-left: none;
            }
          }
        }
        &:nth-child(2) {
          th {
            background: #c6dddf;
          }
        }
      }
    }
    tbody {
      tr {
        td {
          padding-left: 10px;
          border-left: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;

          &.rowGray {
            background: #e1fddf;
            border-left: none;
          }
          &.rowGray2 {
            background: #e1fddf;
          }
          &.default {
            font-weight: bold;
            color: #333;
          }
          &.red {
            font-weight: bold;
            color: #ff3d00;
          }
          &.green {
            font-weight: bold;
            color: #519151;
          }
        }
        &.total {
          td {
            border-bottom: none;
            background: #f3e6e6;
            &:nth-child(1) {
              text-align: center;
              border-left: none;
              background: #ffd1d1;
            }
          }
        }
      }
    }
  }
}
</style>