Vue iview 动态显示表头信息

遇到问题

大部分遇到的表头都是固定的，但如果要求后端给你什么表头信息你就显示什么呢？接下来告诉你方法！！！

固定表头表示

一般Vue静态页面Table为

 <div>
      <Table border :columns="columns" :data="data"></Table>
 </div>

这里的columns指的就是表头，data指的就是表的数据信息

js里静态设置表头为

columns:[
          {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
          },{
          title: "序号",
          key: "number"
          },{
          title: "项目名称",
          key: "objname"
          }
        ]

这里面的内容我就不多说了，不会的自己实践之后再领悟领悟

给data赋值

data: [
        {
          number: 6
        }
      ]

显示为（忽略表头一栏,之后会说如何在js里面添加表操作的）

动态表头表示

静态代码不变
columns清空

columns:[
         
        ]

在methods里写自己的一个自定义函数，这里的beforeMount不多做介绍，里面的代码很简单，循环定义表头，自己可以结合经验修改

beforeMount(){
   this.setcolumns();

 },
methods:{
   setcolumns(){
    var i=0;
    for (i; i < 10; i++) {
         this.columns.push({
           title: i+'',
           key: i+''
         });
       }
   },
  }

结果显示为
再添加点数据

data: [
        {
          1: 6
        },{
          2:6
        },{
          3:6
        }
      ]

显示结果为
方法就是这样，但这个动态只是举了一个很简单的例子，实际要根据后端给了什么，再根据情况写