vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格

╰半橙微兮° 2022-10-29 01:44 503阅读 0赞

## vue+element实现动态表格：根据后台返回的属性名和字段动态生成表头可变表格 ##

由于项目需求，需要有一个动态表格，可以根据配置或从后台获取表格属性列。

## 场景描述： ##

现有一个胡萝卜厂生产不同品种的胡萝卜，为了便于客户了解产品，现需在官网展示胡萝卜信息。现有的萝卜信息：编号（id）、名称（name）、保质期（age）、特点（remark），但是日后会有扩展信息，可能会加上颜色、体积等信息。

## 问题分析： ##

现在可以确定胡萝卜有4个属性要展示，以后还要扩展信息，而且这个厂以后可能生产别的蔬菜水果，也需要展示相应信息，需求变动的话要修改很多代码。这时候如果有一个动态表格，表格的表头信息从后台获取（或在js中配置），那日后修改胡萝卜表的属性（增加或删除表字段）时就不用修改前端页面代码，长远一点来看，日后这个厂生产别的蔬菜水果也需要信息展示时，这个表格就可以复用（把表格抽出来当一个模板，需要用的页面引用即可，这个代码我有时间会从项目中整理出来）。

代码上场啦！！！

### 动态表格 ###

<el-row>
            <el-row> 
              <el-col><span>可选择属性:</span></el-col>
              <el-col>
                <el-checkbox-group v-model="checkArr" size="medium">
                    <el-col :span=12 v-for="item in optionalColumnList" :key="item.prop">
                        <el-row :gutter=20>
                          <el-col>
                            <el-col :span=2><el-checkbox :label="item.propName" @change="menuChange(item)" ></el-checkbox></el-col>
                          </el-col>   
                       </el-row>
                    </el-col>
                </el-checkbox-group>
              </el-col>
            </el-row>
        </el-row>
     <el-table class="fixedtableHeight" v-loading="listLoading" ref="multipleTable" :data="showList" :header-cell-style="{background:'#96CDCD'}" stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
            <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList" :key="item.prop" align="center">
                  <template slot-scope="scope">
                        <span>{
       {scope.row[scope.column.property]}}</span>
                  </template>
              </el-table-column>
      </el-table>

注意tableColumnList就是实现动态的关键因素！  
tableColumnList里面存放的就是我们通过js文件或者接口获取到的表头属性，内容如下：

> \[\{prop: ‘id’, propName: ‘编号’\},  
> \{prop: ‘name’, propName: ‘名称’\},  
> \{prop: ‘age’, propName: ‘保质期’\},  
> \{prop: ‘remark’, propName: ‘特点’\}\],

prop跟胡萝卜表中的字段是一一对应的，propName就是每个字段的中文名，也即在表头显示的名字。

tableColumnList的获取方法有两种：

（1）在前端js中配置

我是放在static文件夹下面的config.js中，目录如下：

![20210207144731910.png][]

内容：直接声明一个数组变量并赋值就好，用的时候引入js直接使用名字就可以使用

![20210207144805657.png][]

放在这里的好处：前端项目打包成dist时，会把这个static文件夹放在dist里面，以后修改的时候就直接修改js配置文件，不用动.vue源代码。

（2）从后端接口获取

注意，采用此种方法获取。后端接口一定要同时返回属性的中文名和英文名，即prop和propName。

还有一个关键步骤，就是一定要在在页面渲染之前获取到tableColumnList，然后再去渲染表格，这就涉及到vue的生命周期了，这块不做多余解释，我是直接在created中调用获取tableColumnList的方法，整个js如下：

解释一下menuChange方法：  
当用户勾选一个可选择属性之后，就触发这个方法，这个方法主要做一件事情：

> 改变tableColumnList的值，从而动态改变表格的列

页面效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcxNDI2Ng_size_16_color_FFFFFF_t_70]  
可选择属性有两个(也可以看作以后可能扩展的属性，这里只演示一下动态效果)，勾选之后:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcxNDI2Ng_size_16_color_FFFFFF_t_70 1]

注意

动态表格与element一般表格在使用方法上的两个区别：

> 1、label与property的赋值方式  
> 动态表格，表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的，后台返回的数据就是上面的tableColumnList。
> 
>  *  通过 **:label=“item.propName”** 取得tableColumnList中的propName，也就是表头每一列的名字；
>  *  通过 **:property=“item.prop”** 取得tableColumnList中对象的prop，也就是后台实体类中的属性名，
> 
> 2、属性和数据双向绑定方式,也就是 scope.row.\*
> 
>  *  通过 \*\* scope.row\[scope.column.property\]\*\* 来获取每一个属性对应的数据， **scope.column.property** 中的property取的就是 **:property=“item.prop”** 中的值；

好了，至此已经实现了基于vue+element的动态表格，核心代码我基本都贴出来了。之前的那篇我写的可能不是很清楚，导致大家看不懂直接找我要源码，这次修改之后我觉得是很清楚的了！认真看下来一定可以自己写出来的！你要实在写不出来，在私信我源码吧，我看到一定回复你。

实现表格间的互相拖拽功能，其实也用到了这种动态生成表格的方法，我在项目中就这样做的，但我最近太忙了，有时间一定整理出来。  
对你有用记得点赞我哦！

[20210207144731910.png]: /images/20221024/38d162aabff345e19f3588ec3af878f1.png
[20210207144805657.png]: /images/20221024/b06df9808e7e4a96b3855cca95fbf999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcxNDI2Ng_size_16_color_FFFFFF_t_70]: /images/20221024/16df1c285bfd454892f150407a2203d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcxNDI2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221024/ce7bee8f871f444cb8ca457dd7181508.png