vue+iviews 动态表格（table组件）

   iviews官网上关于table的使用方法是固定表头的使用方法，如何生成动态的table网上找了好多也没有特别合适的，综合几位博主的文章经过尝试终于实现了，分享出来供大家参考

一、先看官网上的样例

官网上columns是固定好的，自己实现的时候只需要动态的加载data里的数据就可以

 

 

<template>
    <Table :columns="columns" :data="data"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>

二、自己的样例

 

 

 

<template>
    <div>
        <Table :columns="columns" :data="data1"></Table>
    </div>
</template>
<script>
    //调用后端的方法
    import { functionOne } from '@/network/index.js'; 
    export default {
        data() {
            return {
                columns: [],
                data1: []

            }
        },
        methods: {
            setcolumns() {
                const paramter = {
                    sql: 'SELECT USER_NAME,LOGIN_ID FROM  USER_INFO_T',
                };
                //动态表头
                let keys = [];
                functionOne(paramter).then(res => {
                        //数据清空
                        this.columns = [];
                        if (res.data.length > 0) {
                            let obj = res.data[0];
                            for (var key in obj) {
                                keys.push(key);
                                //将表头数据放入columns
                                this.columns.push({
                                    title: key + '',
                                    key: key + ''
                                });
                            }
                        }

                    })
                    .catch(error => {});

                //这里为了展示思路，查询了两次数据库，上面的一次是动态添加表头，下面的一次是动态添加数据，这两部分可以合并在一起，需要的人自己改改就可以了
                functionOne(paramter).then(res => {
                        //数据清空
                        this.data1 = [];
                        //定义放入table组件的数据
                        let retrunValue = '{}';
                        for (var i = 0; i < res.data.length; i++) {
                            //遍历数组
                            let retrunValue = {};
                            keys.forEach(function(value, key, arr) {
                                //知识点一、javascript 表示对象键名的方式有两种： .key 或者 ['key'] 这是里动态的列所以使用后一种方式
                                //给json对象添加属性
                                retrunValue[value] = res.data[i][value];
                                /*
                                知识点二、遍历数组的知识点
                                var a = [1,2,3];
                                a.forEach(function(value,key,arr){
                                  console.log(value)    // 结果依次为1，2，3
                                  console.log(key)      // 结尾依次为0，1，2
                                  console.log(arr)      // 三次结果都为[1,2,3]，该参数貌似没什么用
                                })
                                */
                            });
                            this.data1.push(retrunValue);
                        }
                    })
                    .catch(error => {});
            },

 

        }
    }
</script>
 

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！