vue+element实现从后台获取数据动态形成表格

 

这篇文章是根据https://blog.csdn.net/weixin_43714266/article/details/90644450  这篇网址的基础上编写的

因为公司需求我需要从后端获取数据数据库数据在前端动态显示，因为每次数据在前端显示的标题和内容都不一样，我就在网上看，结果网上都是固定的数据，而且大部分是复制粘贴的，多亏我粘贴网址的博主她帮了我很大的忙。所以记录一下可以帮助有需要的人。需求是在前端写

个输入框根据输入的sql语句来获取数据并在前端显现

    点击

上面的代码是输入框点击事件显示如下图

根据输入框的内容来判断语句目前只实现select语句那个就不说了，还是说怎么实现动态代码的

      stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
     
       
     
   

这个代码每一行都很重要除了样式设置。

这里的  :label="item.value" 是获取字段的表头就是列名，:property="item.id" 是获取字段名的属性

而获取数据的方法就是{{ scope.row[scope.column.property] }}，注意 :label="item.value"获取的数据一定是数据的表头，这样才能获取数据显示在前端。这样说可能大家不太明白，那我就把我的代码粘贴出来给大家看一下分别是两个，一个是写死的，一个是动态的

 

 

​









​

 

这个是我从后端返回的数据这里注意一下columns和rows，columns是列名，rows则是列名对应的数据。

 

根据前两个完整的代码可以看出不同点只有一处就是v-for循环中的数据来源，我把selectedColumnList替换成了array，因为

只有把表头写成selectedColumnList  的格式才能经过selectedColumnList 中的value值去数据库找到对应的数据

因此我把columns的数据循环成json数组的格式好跟selectedColumnList的格式一样这样我就能动态形成表格了

array则是遍历columns形成的json数据格式

 

第一次写这个，说的可能不是很明白，而且有的代码也比较多余，就是想帮大家多了解一点，如果有什么不明白的可以留言，看见会回的