Element-UI中el-table实现简单动态数据绑定的实现

El-Table动态绑定数据的方法

在使用el-table时，有时候数据的列是不固定的，都是通过sql查询来的，怎么实现动态的数据绑定到el-table上了?

看了看官网也没有相关的例子，网上看了下都是封装组件的,咱也不会，最后用了个v-for来实现一下。

后台返回的数据如下：

{"评分人":"15034100248","ID":"BD20200915170817","总分":333,"均分":83,"计数":4,"name":"111"},{"评分人":"13903417124","ID":"BD20200915170817","总分":301,"均分":75,"计数":4,"name":"222"}]

那么我们el-table中需要绑定的列名就是数据中的键名称，键名可以通过key得到，只要读取第一行数据就能获取到整个表格的列名称了，下面用一个v-for来读取第一行数据。

export default {
    name:'QList',
    data(){
        return{
            fenxiNameData:[],//上面返回的数据
 },

<el-table :data="fenxiToNameData" border highlight-current-row style="100%" >
     <el-table-column v-for="(book,key,index) in fenxiToNameData[0]" :key="index" :prop="key" :label="key" align="center">
     </el-table-column>
</el-table>

这样子就把数据绑定到表上了，不过没法用排序功能了，没有生效，不知道为什么。

Element-UI中el-table实现简单动态数据绑定的实现

El-Table动态绑定数据的方法

相关推荐