欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue.js+ElementUI 可变列表格(Table)

程序员文章站 2024-03-21 16:49:46
...

环境:Visual Studio 2015,.NET Framework 4.5.2,ASP.NET MVC5,Vue.js,Element UI 


什么叫可变列表格

顾名思义,就是Table的Column的数量是可变的,可能是3个、4个,或者5个。

如下图:

Vue.js+ElementUI 可变列表格(Table)

Vue.js+ElementUI 可变列表格(Table)


那么,可变列列表的应用场景是什么?

通常,在开发的过程中,总是会遇到在一个列表中根据不同的用户角色和业务场景,展示不同的内容给用户看的需求。

这个时候,我们的可变列表格就有登场的机会了。

当然,你也可以通过v-if控制显示的列。

但是,我觉得用可变列表格的方式可以更灵活、省事。

不仅是这种情况,在所有的需要表格的列的数量不固定的情景中都可以用,比如数据列表模板什么的。


怎么实现可变列表格?或者说具体思路是怎么样的?

1、我们先提出一个设想,在element中,table是由很多个el-table-column构成的,那么我们可不可以通过循环el-table-column构造一个table?

2、要循环el-table-column,那么我们就需要一个由多个列组成的集合,他有3个字段,分别是列名、列显示文本和列宽,如下

                tableCols1: [
                    {
                        name: "date",
                        label: "日期",
                        width: 180
                    },
                    {
                        name: "name",
                        label: "姓名",
                        width: 180
                    },
                    {
                        name: "address",
                        label: "地址",
                        width: 280
                    },
                ]

3、利用v-for循环列集合,构造列表,把name、label、width绑定到el-table-column

            <el-table v-bind:data="tableData1" style="width: 100%" v-bind:row-class-name="tableRowClassName" border>
                <el-table-column v-for="item in tableCols1"
                                 v-bind:prop="item.name"
                                 v-bind:label="item.label"
                                 v-bind:width="item.width">
                </el-table-column>
            </el-table>

4、绑定数据

                tableData1: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]

5、可变列表格就此完成,效果如下

Vue.js+ElementUI 可变列表格(Table)


全部代码,粘上去就可以看效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
    <div id="app">
        <template>
            <el-table v-bind:data="tableData1" style="width: 100%" v-bind:row-class-name="tableRowClassName" border>
                <el-table-column v-for="item in tableCols1"
                                 v-bind:prop="item.name"
                                 v-bind:label="item.label"
                                 v-bind:width="item.width">
                </el-table-column>
            </el-table>
            <br /><br />
            <el-table v-bind:data="tableData2" style="width: 100%" v-bind:row-class-name="tableRowClassName" border>
                <el-table-column v-for="item in tableCols2"
                                 v-bind:prop="item.name"
                                 v-bind:label="item.label"
                                 v-bind:width="item.width">
                </el-table-column>
            </el-table>
        </template>
    </div>
</body>
<script src="~/scripts/jquery-1.10.2.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData1: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                tableCols1: [
                    {
                        name: "date",
                        label: "日期",
                        width: 180
                    },
                    {
                        name: "name",
                        label: "姓名",
                        width: 180
                    },
                    {
                        name: "address",
                        label: "地址",
                        width: 280
                    },
                ],
                tableData2: [{
                    num: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    num: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    num: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    num: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                tableCols2: [
                    {
                        name: "num",
                        label: "#",
                        width: 80
                    },
                    {
                        name: "date",
                        label: "日期",
                        width: 180
                    },
                    {
                        name: "name",
                        label: "姓名",
                        width: 180
                    },
                    {
                        name: "address",
                        label: "地址",
                        width: 280
                    }
                ]
            }
        },
        methods: {
            tableRowClassName: function (obj) {
                if (obj.rowIndex % 2 == 0) {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }
                return '';
            }
        }
    });
</script>
</html>

效果图

Vue.js+ElementUI 可变列表格(Table)