quasar框架表格多级表头，版本（V1.20.2）

记录一下quasar框架的多级表头，也希望对各位码友有帮助哈，代码复制直接能用，里面代码就不多说了，很简单

属性

multipleHeadList    头部渲染的表头列表你有几级就加几个就行

colSpan    占用几个列
rowSpan    占用几行 如果不是一 他会自己合并的

headerStyle   这个属性是我们表格二次封装了，headerStyle 这是我们自己的属性，正常的写法就是width:'xxx px'

样式图

<template>
  <q-page class="cc-admin">
    <div class="q-box anaTitle">
        盗伐滥伐林木案件分析
    </div>
    <div class="q-box">
      <q-table
          flat
          color="primary"
          class="cross_table q-pa-md col"
          separator="cell"
          :data="data"
          :columns="columns"
          row-key="name"
          bordered
      >
        <template v-slot:header="props">
          <template>
            <q-tr v-for="(headList,index) in multipleHeadList" :key="index">
              <q-th
                  v-for="head in headList"
                  :key="head.name"
                  :colspan="head.colSpan"
                  :rowspan="head.rowSpan"
              >{{head.name}}</q-th>
            </q-tr>
          </template>
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
          </q-tr>
        </template>
      </q-table>
    </div>
  </q-page>
</template>
<script>

export default {
  data() {
    return {
      selected: [],
      multipleHeadList: [
        [{ name: '', colSpan: 1, rowSpan: 1 }, { name: '案发区域', colSpan: 2, rowSpan: 1 }, { name: '案发时间', colSpan: 4, rowSpan: 1 }, { name: '林木权属', colSpan: 3, rowSpan: 1 }],
        [{ name: '', colSpan: 1, rowSpan: 1 }, { name: '案发区域', colSpan: 2, rowSpan: 1 }, { name: '案发时间', colSpan: 4, rowSpan: 1 }, { name: '林木权属', colSpan: 3, rowSpan: 1 }],
      ],
      columns: [
        {
          name: 'title',
          label: '',
          align: 'center',
          headerStyle: 'width: 100px;',
          field: (row) => row.title,
          format: (val) => `${val}`,
        },
        {
          name: 'name',
          label: '城市',
          align: 'center',
          field: (row) => row.name,
          headerStyle: 'width: 100px;',
          format: (val) => `${val}`,
        },
        {
          name: 'Calories', align: 'center', label: '乡村', field: 'calories', title: '', headerStyle: 'width: 100px;',
        },
        {
          name: 'fat', label: '春季', field: 'fat', align: 'center', title: '',
        },
        {
          name: 'Calories', align: 'center', label: '夏季', field: 'calories', title: '',
        },
        {
          name: 'fat', label: '秋季', field: 'fat', align: 'center', title: '',
        },
        {
          name: 'Calories', align: 'center', label: '冬季', field: 'calories', title: '',
        },
        {
          name: 'fat', label: '国家所有', field: 'fat', align: 'center', title: '',
        },
        {
          name: 'Calories', align: 'center', label: '集体所有', field: 'calories', title: '',
        },
        {
          name: 'fat', label: '个人所有', field: 'fat', align: 'center', title: '',
        },
      ],
      data: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%',
          title: '案件数（数）',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%',
          title: '案件数（数）',

        }
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
  .anaTitle {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
</style>