Elementui 在线获取表格数据

本文转载自查看原文 2020-11-02 15:26 557 VUE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户信息页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="">
</head>
<body>
<div id="app">
    <el-table ref="testTable" :data="tableData" style="width:45%" border>
        <el-table-column fixed prop="id" label="ID" width="80"></el-table-column>
        <el-table-column fixed prop="username" label="用户名称" width="120"></el-table-column>
        <el-table-column prop="post" label="角色" width="120"></el-table-column>
        <el-table-column prop="department_name" label="部门" width="120"></el-table-column>
        <el-table-column prop="post_name" label="岗位" width="120"></el-table-column>
        <el-table-column prop="top" label="直属上级" width="120"></el-table-column>
        <el-table-column prop="other_department" label="附属部门" width="120"></el-table-column>
        <el-table-column prop="last_login_time" label="最后登录时间" width="180">{{$moment().format('YYYY-MM-DD HH:mm:ss')}}
        </el-table-column>
    </el-table>
    <div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Number(totalCount)">
        </el-pagination>
    </div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/moment.main.js"></script>
<script type="text/javascript">
    Vue.prototype.$moment = moment
    Vue.prototype.$http = axios
    var vue = new Vue({
        el: '#app',
        data: {
            //表格当前页数据
            tableData: [],
            //默认每页数据量
            pagesize: 10,
            //当前页码
            currentPage: 1,
            //默认数据总数
            totalCount: 0,
            //url参数
            urlParams: {
                page: 1,
                limit: 10,
            },
        },
        computed: {
            getQueryString: function () {
                let QueryString = '';
                for (var i in this.urlParams) {
                    QueryString += i + "=" + this.urlParams[i] + "&";
                    console.log(i);
                    console.log(i,this.urlParams[i]);
                }
                console.log(QueryString);
                return QueryString.slice(0, -1);
            },
        },
        methods: {
            //从服务器读取数据
            loadData: function () {
                let _this = this
                this.$http.get('http://xxxxxxxxxxxxxx/get_user_list?' + this.getQueryString).then(function (res) {
                    console.log(res.data);
                    if (res.data.code == 0) {
                        _this.tableData = res.data.data;
                        _this.totalCount = res.data.count;
                    } else {
                        return;
                    }
                })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //每页显示数据量变更
            handleSizeChange: function (val) {
                this.urlParams.limit = val;
                this.loadData();
            },
            //页码变更
            handleCurrentChange: function (val) {
                this.urlParams.page = val;
                this.loadData();
            },
        },
        created() {
            this.loadData();
        },
    });
</script>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 elementUI表格显示数据 ElementUI表格数据导出为Excel elementUI table 关于嵌套表格第二层数据的获取与渲染 ElementUI动态表格数据转换formatter elementUI动态数据表格（带分页） Vue(elementUI table组件获取表格当前行的索引) Elementui表格获取索引index用于v-for 关于在线编辑表格的JS架构--Web电子表格插件、在线Excel插件、在线Spreadsheet插件、大量数据行-百万数据行插件、Canvas表格 elementui表格表头合并 Jquery DataTables 获取表格数据及行数据