示例文件

header_dynamic_assignment.vue

思路阐述

通过循环columns数组生成想要的列数

v-for="(column, index) in columns"

columns数组里有多少个对象，就需要可以生成多少个列

columns对象数组字段解析

columns: [
        { field: 'name', title: '姓名', width: 200 },
        { field: 'age', title: '年龄', width: 100 }
      ]

field为每列所绑定tableData的字段名
title为每列表头显示内容
width为每列的宽度

tableData对象数组里的字段对应关系

tableData: [
        { id: 1, name: '张三', age: 30 },
        { id: 2, name: '李四', age: 28 }
      ]

最开始第一列绑定的是tableData里的name字段，表头为'姓名'
第二列绑定的是tableData里的age字段，表头为'年龄'

表头动态切换原理

setTimeout(() => {
      this.columns = [
        { field: 'name', title: '动态姓名', width: 250 },
        { field: 'age', title: '动态年龄', width: 150 },
        { field: 'address', title: '新增地址', width: 300 }
      ]
    }, 2000)

通过改变列配置信息，切换每列绑定的字段
切换后第一列绑定tableData里的name字段，表头为'动态姓名'
第二列绑定的是tableData里的age字段，表头为'动态年龄'
第三列绑定的是tableData里的address字段，表头为'新增地址'
但由于tableData数组里的对象没有address字段，所以最后一列仅仅是被绑定了，没有显示出任何内容
如果最后一列绑定的是id的话就会把每一行的id数值显示出来