ant-design-vue table表格多级表头动态渲染

 上方为页面展示图

话不多说 上代码

        <a-table
          class="baseTable"
          :dataSource="dataSource"
          bordered
          :pagination="false"
          rowKey="id"
          :scroll="{ x: '1400px' | true }"
          v-else
        >
          <a-table-column
            :width="160"
            :ellipsis="true"
            align="center"
            title="序号"
            :customRender="(text, record, index) => `${index + 1}`"
          ></a-table-column>
          <a-table-column dataIndex="time" :width="160" :ellipsis="true" title="日期"></a-table-column>
          <template v-for="(item, index) in fieldList">
            <a-table-column-group :key="item.groupName" :title="item.groupName" align="center">
              <template v-for="(item1, index1) in item.groupList">
                <a-table-column align="center" :title="item1.name" :width="140" :key="item1.name">
                  <template slot-scope="text, record">
                    <div :style="getStyle(record.formsData, index, index1)">
                      {{ record.formsData[index].groupList[index1].value }}
                    </div>
                  </template>
                </a-table-column>
              </template>
            </a-table-column-group>
          </template>
        </a-table>

关键点就是数据的形式和动态表头取的数据要对应 我这边是默认取的数组返回的第一条里formsData作为动态表头渲染

      dataSource: [
        {
          id: '1',
          formsData: [
            {
              groupName: '处理量',
              groupList: [
                {
                  name: '生活',
                  value: '1',
                },
                {
                  name: '工业',
                  value: '1',
                },
                {
                  name: '总',
                  value: '1',
                },
              ],
            },
            {
              groupName: '处理量2',
              groupList: [
                {
                  name: '生活2',
                  value: '2',
                },
                {
                  name: '工业2',
                  value: '2',
                },
                {
                  name: '总2',
                  value: '2',
                },
              ],
            },
            {
              groupName: '处理量3',
              groupList: [
                {
                  name: '生活3',
                  value: '3',
                },
                {
                  name: '工业3',
                  value: '3',
                },
                {
                  name: '总3',
                  value: '3',
                },
              ],
            },
          ],
        },
        {
          id: '2',
          formsData: [
            {
              groupName: '处理量',
              groupList: [
                {
                  name: '生活',
                  value: '4',
                },
                {
                  name: '工业',
                  value: '4',
                },
                {
                  name: '总',
                  value: '4',
                },
              ],
            },
            {
              groupName: '处理量2',
              groupList: [
                {
                  name: '生活2',
                  value: '5',
                },
                {
                  name: '工业2',
                  value: '5',
                },
                {
                  name: '总2',
                  value: '5',
                },
              ],
            },
            {
              groupName: '处理量3',
              groupList: [
                {
                  name: '生活3',
                  value: '6',
                },
                {
                  name: '工业3',
                  value: '6',
                },
                {
                  name: '总3',
                  value: '6',
                },
              ],
            },
          ],
        },
      ],
      fieldList: [
        {
          groupName: '处理量',
          groupList: [
            {
              name: '生活',
              value: '1',
            },
            {
              name: '工业',
              value: '2',
            },
            {
              name: '总',
              value: '3',
            },
          ],
        },

        {
          groupName: '处理量2',
          groupList: [
            {
              name: '生活2',
              value: '2',
            },
            {
              name: '工业2',
              value: '3',
            },
            {
              name: '总2',
              value: '4',
            },
          ],
        },

        {
          groupName: '处理量3',
          groupList: [
            {
              name: '生活3',
              value: '3',
            },
            {
              name: '工业3',
              value: '3',
            },
            {
              name: '总3',
              value: '3',
            },
          ],
        },
      ],

表格颜色的设置这个是当前项目要求 一般用不到 通过数值来判断当前显示颜色 本来想用a-table自带的customCell来实现 但是后来发现不行 且这个方法不支持自定义传参 没办法只好通过样式添加了 这里通过getStyle方法来动态判断

    getStyle(data, index, index1) {
      const name = data[index].groupList[index1].name
      const value = data[index].groupList[index1].value
      return {
        backgroundColor: (name === '生活2' && value >= 5) || (name === '工业3' && value >= 6) ? 'red' : '',
        color: (name === '生活2' && value >= 5) || (name === '工业3' && value >= 6) ? '#fff' : '',
      }
    },

到这里就结束了 写的不好的地方希望大家多多指正 其它有好的方式可以在下方评论或则私信我 感谢大家