ElementUI 使用Table组件，绘制一个二维表格

先上图看一下效果

 表格的横坐标 显示不同的人员，表格纵坐标显示标签类型，数据是 人员与标签类型一一对应，展示这个人分别绘制了不同类型标签的数量。

分析：按照table 组件的官网老实本分的用法是不行了，所以我们需要两个数组去完成这个效果。

                        <el-table
                            v-if="!peopleTagNumLoading"
                            ref="refreshTable"
                            :data="createList"
                            :header-cell-style="{color: '#6C7293'}"
                            style="width: 100%;"
                            align='center'
                        >
                           <el-table-column label="标签/人员" prop="categoryName"></el-table-column>
                            <el-table-column label="人员" align="center">
                                <el-table-column
                                    v-for="item in peopleList"
                                    align="center"
                                    :label="item.name"
                                    :key="item.id"
                                    prop="value"
                                >
                                    <template slot-scope="scope">
                                        <div>{{ item[scope.row['categoryId']] }}</div>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                        </el-table>

createList: [
                {
                    categoryName: 'name1',
                    categoryId: 'id1321'
                },
                {
                    categoryName: 'name2',
                    categoryId: 'id1334'
                }
],
peopleList: [
   {
      name: '人员名字',
      id: '1',
       id1321: '100',
        id1334: '56',
    }
],

思考：你需要将接口数据拿回来自己整合一下，分成如上的两个数组，table 的 data绑定 createList 这个数组是控制标签名字的，只会显示第一列的数据（标签类别），你需要给第一个 el-table-colum 的 prop 绑定这个数组里面的 categoryName，这样就会显示类别了

随后，你需要写一个v-for 循环生成有关于人名的第一行内容，这里就用到了 peipleList 数组，利用自定义的模板方法，编写下面的数据显示内容。这里很重要， 因为我们table 绑定的是  createList，所以每行数据也就是 scope 里面都带有categoryId 属性，然后又因为v-for 循环了 peopleList 所以我们可以利用item 取到 人员下面的以标签类型的ID为键的值，这样 

{{ item[scope.row['categoryId']] }}  这个东西就能取到值了。

最后 注意 table 组件我加了一个 v-if 以及 ref  属性， 因为我们这个表格不是标准的传值方式，所以翻页的时候，会出现数据不更新，数据错乱等情况，所以在翻页的时候，将这个表格用v-if 给删除，等接口返回后再将其显示出来，随后使用 this.$refs.refreshTable.doLayout(); 这个方法重绘表格，就可以了。