关于vue.js:使用ElementUi实现分页查询功能

30次阅读

共计 2619 个字符，预计需要花费 7 分钟才能阅读完成。

刚刚开始实习，划水两天后分到的第一个工作，算是一个小 demo 吧！
磕磕绊绊实现后记录一下。。。
查问条件为：顾客姓名、商品名称、订单创立时间段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 测试 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入款式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        #app {
            width: 1200px;
            margin: 0 auto;
            padding-top: 20px;
            text-align: center;
        }
        .table {
            font-size: 10px;
            margin: 0 auto;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="custName" v-model="custName" placeholder="请输出顾客姓名"/>
    <input type="goodsName" v-model="goodsName" placeholder="请输出商品名称"/>
    <input type="startDate" v-model="startDate" placeholder="起始工夫"/>
    <input type="endDate" v-model="endDate" placeholder="最初工夫"/>
    <el-button type="primary" round size="mini" v-on:click="queryOrder"> 查问 </el-button>
    <el-button type="primary" round size="mini" v-on:click="clearData"> 清空 </el-button>
    <br>
    <table border="1" class="table">
        <tr>
            <td> 订单号 </td>
            <td> 下单工夫 </td>
            <td> 订单状态 </td>
            <td> 源零碎号 </td>
            <td> 商品名称 </td>
            <td> 商品订单号 </td>
            <td> 商品号 </td>
            <td> 品种 </td>
            <td> 地址 </td>
            <td> 顾客姓名 </td>
            <td> 电话 </td>
        <tr/>
        <tr v-for="item in dataList">
            <td v-text="item.orderId"></td>
            <td v-text="item.createDate"></td>
            <td v-text="item.orderStatus"></td>
            <td v-text="item.sourceSystemId"></td>
            <td v-text="item.goodsName"></td>
            <td v-text="item.goodsOrderId"></td>
            <td v-text="item.goodsId"></td>
            <td v-text="item.busiType"></td>
            <td v-text="item.address"></td>
            <td v-text="item.custName"></td>
            <td v-text="item.phone"></td>
        <tr/>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            custName: '',
            goodsName: '',
            startDate: '',
            endDate: '',
            dataList: [],},
        methods: {queryOrder: function () {
                var self = this;
                axios.post('http://localhost:8080/demo/queryDemoList', {
                    custName: this.custName,
                    goodsName: this.goodsName,
                    startDate: this.startDate,
                    endDate: this.endDate
 }).then(function (response) {console.info('响应数据:' + JSON.stringify(response));
                    var item;
                    self.dataList = response.data.data;
                });
            },
            clearData: function () {
                var self = this;
                this.custName = '', this.goodsName ='', this.startDate = '', this.endDate ='';
                axios.post('http://localhost:8080/demo/queryDemoList', {
                    custName: this.custName,
                    goodsName: this.goodsName,
                    startDate: this.startDate,
                    endDate: this.endDate
 }).then(function (response) {self.dataList = response.data.data;});
            }
        },
        created: function () {
            var self = this;
            axios.post('http://localhost:8080/demo/queryDemoList', {
                custName: this.custName,
                goodsName: this.goodsName,
                startDate: this.startDate,
                endDate: this.endDate
 }).then(function (response) {self.dataList = response.data.data;});
        }
    });
</script>
</body>
</html>

正文完