由于工作需要，最近开始搞起了vue。对于vue，我什么都不会。什么特性都不知道，什么基础都没有。无非就是百度-->分析-->复制-->报错-->继续百度的流程中去搞呗。当然不建议这样啊，毕竟这样不好，面试可不能百度。当然你面试进去了工作大多数也还是百度。（面试造火箭，工作拧螺丝。）

根据需求，现在要求我画出一个类似于下图的table：

这就很有意思了，我连合并表头都是百度的。因为我对vue一无所知，好奇怪哦，一无所知照样干活。这把再次对面试官们吐槽一下。

先说下合并表头。因为公司框架表头是写在vue里的，所以代码如下：

private columns = [
    {
      title: '项目',
      dataIndex: 'projectName',
      align: 'center'
    },
    {
      title: '合计',
      //定义children，然后就可以合并children所在的三个单元格
      children: [
        {
          title: '预算',
          dataIndex: 'completionRate',
          align: 'center'
        },
        {
          title: '已完成',
          dataIndex: 'yearOnYear',
          align: 'center'
        },
        {
          title: '完成率',
          dataIndex: 'monthOnMonth',
          align: 'center'
        }
      ],
      align: 'center'
    }
  ]

然后是动态变化的表头字段，title就是字段，也就是动态变化title。这个时候，就需要加一个slot，在vue里叫插。可以理解为slot插在这个位置，所以这个位置的内容应该是slot的内容。

    <s-table
      ref="table"
      size="default"
      rowKey="id"
      bordered="true"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
    <--增加一个插槽-->
    <template slot="title1">{{title1}}</template>
    </s-table>

具体放在哪里，你们可以试，不报错就行呗。这个时候Vue里与插槽对应的表头就要改成下面那样：

 private columns = [
    {
      title: '项目',
      dataIndex: 'projectName',
      align: 'center'
    },
    {
      // title: '合计',
      //可以理解为关联插槽了。我试过，scopedSlots和slots应该是columns的一个属性，改成别的就不行。
      //slots: {
        //title: 'title1'
      //},
      scopedSlots: {
        title: 'title1'
      },
      children: [
        {
          title: '预算',
          dataIndex: 'completionRate',
          align: 'center'
        },
        {
          title: '已完成',
          dataIndex: 'yearOnYear',
          align: 'center'
        },
        {
          title: '完成率',
          dataIndex: 'monthOnMonth',
          align: 'center'
        }
      ],
      align: 'center'
    }
  ]

最后写个方法改变插槽里title1的值就可以了，如下：

  protected loadData(parameter: any) {
    this.title1 = parameter.projectName
  }
//不要忘了定义title1哦
private title1 = '合计'