vue + element ui 實現實現動態渲染表格

時間 2019-11-20

標籤 vue element 實現動態渲染表格简体版

原文原文鏈接

前言：以前須要作一個頁面，可以經過表名動態渲染出不一樣的表格，這裏記錄一下。轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9786326.htmljavascript

github地址：yuleGH githubhtml

代碼以下：vue

<html>

<head>
    <title>動態渲染整個表格</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
</head>
<body>
<div id="app">

    <p style="color: red;">動態根據表名，渲染整個表格，使用組件；這裏沒用聯網，因此就一個簡單的靜態頁面</p>

    <el-row style="margin-bottom: 20px">
        <el-col :span="3">
            <el-button type="primary" @click="handleSelectTable(0)">查詢表1</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="handleSelectTable(1)">查詢表2</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="handleSelectTable(2)">查詢表3</el-button>
        </el-col>
    </el-row>

    <table-component ref="tableRef" :table-columns="tableColumns"></table-component>
</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="../lib/vue.js"></script>
<script type="text/javascript" src="../lib/elementui/index.js"></script>

<!--表格組件，須要分頁-->
<div id="tableComponentApp">
    <div>
        <el-table
                :data="pageData"
                border
                style="width: 100%">
            <el-table-column
                    v-for="(item, index) in tableColumns"
                    :prop="item.prop"
                    :label="item.label"
                    :key="item.id"
                    sortable
                    show-overflow-tooltip
            >
            </el-table-column>
        </el-table>

    </div>
</div>
</div>
<script type="text/javascript">
    const tableComponent = {
        template: window.document.getElementById("tableComponentApp").innerHTML,
        data: function () {
            return {
                pageData: []
            }
        },
        props: {
            tableColumns: {
                type: Array,
                required: true
            }
        },
        methods: {
        }
    };
</script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            idStr : "",
            printStr : "",

            tableColumnArray:[
                [
                    {id: "id", prop: "id", label: "id：惟一標識"},
                    {id: "userName", prop: "userName", label: "userName：用戶名"}
                ],
                [
                    {id: "bookName", prop: "bookName", label: "bookName: 書名"},
                    {id: "price", prop: "price", label: "price: 價格"}
                ],
                [
                    {id: "createTime", prop: "createTime", label: "createTime: 建立時間"},
                    {id: "address", prop: "address", label: "address: 地址"},
                    {id: "email", prop: "email", label: "email: 郵件"}
                ]
            ],
            tableDataArray:[
                [
                    {id: "1", userName: "xiaohua"},
                    {id: "2", userName: "小明"}
                ],
                [
                    {bookName: "大話設計模式", price: "56"},
                    {bookName: "算法導論", price: "156"},
                    {bookName: "一本書", price: "35"}
                ],
                [
                    {createTime: "2018-10-14", address: "sdf", email: "sdfsd@yule.com"}
                ]
            ],
            tableColumns : []
        },
        components: {
            'table-component': tableComponent
        },
        methods: {
            handleSelectTable(index){
                this.tableColumns = this.tableColumnArray[index];
                this.$refs.tableRef.pageData = this.tableDataArray[index];
            }
        }
    });
</script>

</body>

</html>

轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9786326.htmljava

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。