element ui-table爬坑

布满荆棘的人生 2021-09-18 16:34 374阅读 0赞

之前在vue中使用element-ui的表格，都是固定的key值，也就是这种情况。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70][]

所以我们只要在table的data传入这个数组，然后在column的prop中传入key即可实现渲染表格，行数是数组的长度，每一列是传入的key

<el-table   :data="tableData"   style="width: 100%">
        <el-table-column  prop="name" label="姓名"></el-table-column>
        <el-table-column  prop="sex"  label="性别"></el-table-column>
        <el-table-column  prop="age"  label="年龄"></el-table-column>
    </el-table>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1][]

但是当我们的key是不固定的，那么这样的问题应该怎么解决？

肯定不能写固定的key，应为每次的key都是不一致的，那么最好的办法就是循环以此来动态获取key

那么我们来看看怎么实现的。

先看需求：

我们需要渲染这个数组，其中有一项是样本数据，也是个数组格式，它也是需要表格做为支撑的，但是每条数据的样本数据的长度不一，而且key值不固定，那么怎么解决呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2][]

**错误示范：**

<el-table :data="props.row.SampleData" style="width: 100%">
        <el-table-column label="标题" align="center">
            <template slot-scope="scope">
                <el-table-column :prop="key" :label="key" v-for="(val, key) in scope.row"></el-table-column>
            </template>
        </el-table-column>
    </el-table>

我个人的理解是，在table中传入当前数组中的SampleData数组，然后我需要一个列来接受当前的SampleData数组中的每一个对象，然后通过循环对象，拿到对象的key和value，然后prop传入key，以此来获取当前key的值，label传入key显示对应标题。

这里解释一下，在<el-table-column>中写入<template>应该是固定写法吧，因为需要一个列来接受这个当前值，如果不写<el-table-column>直接写<template>就没办法渲染。

但是理论上来说理解的也没问题，那么我们看看效果吧：

![20190402094831843.png][]

问题一：重复渲染（数组长度为2，所以重复渲染2次）

问题二：多出来之前写的标题那一列

（注：这里目前后台数据还是一样的，所以都是一样的key）

问题原因：

首先是因为模板template是局部插槽，第一个对象循环一遍，然后拿到key后渲染数据，第二个对象又循环一遍，所以会出现重复渲染，而正因为是插槽，所以之前的column就会空出来，所以就会有之前多的一列。

**正确示范：**

<el-table :data="props.row.SampleData" style="width: 100%">
        <el-table-column :prop="key" :label="key" v-for="(val, key) in props.row.SampleData[0]" align="center">
    
        </el-table-column>
    </el-table>

在刚开始的时候，大家也看过循环数组，只要table的data中传入数组，那么column的prop只要传入key就可以了。

那么虽然是不同对象，但是同一个对象中的key是一样的，那么我们只要拿出第一个对象的key，然后就能像初始那样传入key以此来获取值。

![2019040209565798.png][]

![20190402095813684.png][]

这样就能实现每个样例数据的对象key不固定的问题了。

原因分析：

之前陷入的误区是因为每条数据中的样例数据数组的对象和另一条数据中的样例数据数组的对象的长度不一，key值不一样，但是每个数组中的各个对象是一样的，key值固定，只是和其他数据中的对象的key不一样，所以我们只要拿出第一条数据的key传入prop，那么就能得到对应的值了。

可能还是我对element ui的结构不太理解，所以才会陷入误区。

好了，以上就是对element ui表格的一些理解分析。

如有问题，请指出，接受批评。

个人微信公众号：

![20200824120044465.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210812/41fbeb8126264100911abf08615a7ece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]: /images/20210812/c3a29760862c43a5b66d180bb87c1357.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2]: /images/20210812/861b5627d9ab403f847c2dfb80558ef9.png
[20190402094831843.png]: /images/20210812/6d2677fd3939414fa3f4e70a365ba0c3.png
[2019040209565798.png]: /images/20210812/1fbd2c236f184492b59174def4e79b49.png
[20190402095813684.png]: /images/20210812/080dedcefd044fedb592fb662162a8fb.png
[20200824120044465.png]: /images/20210812/8357b31b04c549f890189c68641ee1da.png