ElementUi的table左侧列固定值，渲染每一行与列对应的数据

平时我们在用表格渲染数据时，大部分都是表头固定然后用固定的数据格式来渲染，今天做到了一个新的需求，除了表头数据，还得与左侧渲染的列的数据相对应

上代码

<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    //左侧列的数据
    <el-table-column
      prop="name"
      label="名称"
    >
    </el-table-column>
    //表头的数据
    <el-table-column
      v-for="item in headerList"
      :label="item.name"
    >
    <template slot-scope="scope">
        <span>{{scope.row[item.key]}}</span>
    </template>
    </el-table-column>
</el-table>

//数据
data(){
    return{
        tableData:[
            {
             name:'张三',
             L1:3,
             L2:3
            }, 
            {
             name:'张三',
             L1:3,
             L2:3
            }
        ],
        headerList:[
            {
            title:'L1',
            key: 'l1'
            },
            {
            title:'L1',
            key: 'l1'
            },
        ]
    }
}

这样便可以实现， 使用插槽去取到对应的每一行的数据，再拿到对应的key