vxe-table中动态渲染数据和多级表头的方法

这里的渲染方法主要说的是vxe-table在vue2中渲染数据和多级表头的方法，在vue3中能不能使用这样的方法我并不清楚，当然你可以试一试，我个人觉得99%也是可行的。

vxe-table官网文档地址如下，你可以参考其如何安装导入。

vxe-table v2https://vxetable.cn/v2/#/table/start/install以下是示例代码：

getData当作是从后端接收到的数据，我们在vxe-table标签上添加ref，这样通过$refs便可以拿到vxe-table这个组件对象，在它的身上有很多方法，我们便可以利用.xxx的方式进行调用，使用el-table上的方法时，也是用到了这种方法。

我们通过调用其身上自带的reloadColumn，reloadData方法，分别实现了对表头以及内容的动态渲染，只要保证传入数据的结构及对应属性准确，便可实现整个表格的渲染。

<template>
  <vxe-table
  ref="vtable"
    border
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      getData:{
        headers: [
        {
          title: '基本信息',
          children: [
            { field: 'name', title: '姓名' },
            { field: 'age', title: '年龄' }
          ]
        },
        {
          title: '附加信息',
          children: [
            { field: 'city', title: '出生地' },
            { field: 'ex', title: '前任' }
          ]
        }
      ],
        data: [
        { name: '永野芽郁', age: 25, city: '东京', ex: '小天才阿阔' },
        { name: '绫濑遥', age: 38, city: '广岛', ex: '小天才阿阔' },
        { name: '石原里美', age: 37, city: '东京', ex: '小天才阿阔' }
      ]
      }
    };
  },
  mounted() {
    // 动态渲染多级表头，只要保证参数结构正确即可，嵌套再深也没有问题
    this.$refs.vtable.reloadColumn(this.getData.headers);
    // 动态渲染数据
    this.$refs.vtable.reloadData(this.getData.data);
  },  
  methods: {
    // 如果后端返回的表头结构内，属性是label，prop的话可以调用此方法
    generateHead(heads) {
      console.log('50',this)
      heads?.forEach((h) => {
        h.field = h.prop;
        delete h.prop
        h.title = h.label;
        delete h.label
        h.children && this.generateHead(h.children);
      });
    },
  }
};
</script>

渲染出来的页面如下：

到这里可能有人不明白我上面自定义的generateHead函数是做什么用的，其实你仔细看下代码就能明白，它就是接收一个数组，然后给数组中每个元素添加一个俩新属性，field，title，并删除掉原本的prop，label属性，为什么要这样做？因为在多数情况下，后端返回的数据都是prop与label，这也是为了契合element ui组件的设计。

这时候你就需要调用下generateHead这个方法了，这里面有个delete大家要注意

注意：

delete 不是 window 对象身上的方法，它是 JavaScript 语言中的一个操作符，用于删除对象的属性或者数组的元素。在浏览器环境中，全局对象是 window，但 delete 并不是 window 对象的一个方法或属性。

如果你不调用generateHead会出现这样的提示：

我们调用下，这里注意看我headers里面换成了label，prop，已经不是最开始的title，field了

<template>
  <vxe-table
  ref="vtable"
    border
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      getData:{
        headers: [
        {
          label: '基本信息',
          children: [
            { prop: 'name', label: '姓名' },
            { prop: 'age', label: '年龄' }
          ]
        },
        {
          label: '附加信息',
          children: [
            { prop: 'city', label: '出生地' },
            { prop: 'ex', label: '前任' }
          ]
        }
      ],
        data: [
        { name: '永野芽郁', age: 25, city: '东京', ex: '小天才阿阔' },
        { name: '绫濑遥', age: 38, city: '广岛', ex: '小天才阿阔' },
        { name: '石原里美', age: 37, city: '东京', ex: '小天才阿阔' }
      ]
      }
    };
  },
  mounted() {
    // 对表头数据进行处理
    this.generateHead(this.getData.headers)
    console.log(this.getData.headers)
    // this.generateHead(this.getData.headers)
    // 动态渲染多级表头，只要保证参数结构正确即可，嵌套再深也没有问题
    this.$refs.vtable.reloadColumn(this.getData.headers);
    // 动态渲染数据
    this.$refs.vtable.reloadData(this.getData.data);
  },  
  methods: {
    // 如果后端返回的表头结构内，属性是label，prop的话可以调用此方法
    generateHead(heads) {
      console.log('50',this)
      heads?.forEach((h) => {
        h.field = h.prop;
        delete h.prop
        h.title = h.label;
        delete h.label
        h.children && this.generateHead(h.children);
      });
    },
  }
};
</script>

然后浏览器上的提示就消失了，更多细节可将代码复制粘贴到自己的电脑上进行尝试，不过在那之前记得先安装导入好vxe-table的相关东西。