element-UI table自定义表头

直接开门见山，先看一下element-UI官网table的格式

  <template>
    <el-table
      :data="tableData"
      style=" 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

可以看到table表格是直接通过:data来动态绑定data中的数据，并且是按照列来渲染的，那么就存在一种情况了，如果我想要一行跟其他行完全不一样的效果怎么办呢？

比如我想要一个这样的效果，上面或许会有很多个行，但是最下面一行永远多出一个添加图片的弹框，结构跟样子都与其他的不同，那么需要怎么办呢？

当当当当。。。。我来揭晓答案啦

那就是可以使用element-UI的自定义表头来实现将表头和内容分离，从而实现按照行来渲染数据，下面开始具体的案例

1. 首先，在data中新建一个数组，用来存放标题

 

2. 在html结构中循环这个表头，就已经实现了与内容的分离

然后将:render-header='自定义的方法'，最后以jsx的形式将html结构返回（需要单独下载jsx的依赖包，如果下载之后无法启动项目将node_modules包删掉，重新下载应该就ok了）

3.第三步，在使用插槽即可根据每一列的index来自定义显示的内容，当需要在某一列的某一行显示与其他行不同的效果时，可以使用v-if来进行条件判断，控制某一行某一列的显示内容

4.来看一下效果图叭，成功显示了一行与其他行都不一致的内容