|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div class="qpage">
|
|
|
+ <el-form :inline="true" :model="formInline" class="query-form-inline">
|
|
|
+ <el-form-item label="用户名">
|
|
|
+ <el-input v-model="formInline.user" placeholder="请输入用户名关键字" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit" loading>检索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="qpage-body">
|
|
|
+ <el-table :data="tableData" style="width: 100%;height:100%;" border stripe>
|
|
|
+ <el-table-column fixed prop="date" label="Date" width="150" />
|
|
|
+ <el-table-column prop="name" label="Name" width="120" />
|
|
|
+ <el-table-column prop="state" label="State" width="120" />
|
|
|
+ <el-table-column prop="city" label="City" width="320" />
|
|
|
+ <el-table-column prop="address" label="Address" width="600" />
|
|
|
+ <el-table-column prop="zip" label="Zip" width="120" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="qpage-foot">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="currentPage4"
|
|
|
+ v-model:page-size="pageSize4"
|
|
|
+ :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :small="false"
|
|
|
+ :disabled="false"
|
|
|
+ :background="false"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="400"
|
|
|
+
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { reactive,ref } from 'vue'
|
|
|
+
|
|
|
+const formInline = reactive({
|
|
|
+ user: '',
|
|
|
+ region: '',
|
|
|
+})
|
|
|
+
|
|
|
+const pageSize4 = ref(100)
|
|
|
+const currentPage4 = ref(4)
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ console.log('submit!')
|
|
|
+ alert();
|
|
|
+}
|
|
|
+
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-08',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-06',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-07',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-06',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-07',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-06',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-07',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-06',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-07',
|
|
|
+ name: 'Tom',
|
|
|
+ state: 'California',
|
|
|
+ city: 'Los Angeles',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ zip: 'CA 90036',
|
|
|
+ },
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .qpage{
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .query-form-inline{
|
|
|
+ margin:0 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qpage-body{
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ }
|
|
|
+ .qpage-foot{
|
|
|
+ padding:10px 0;
|
|
|
+ }
|
|
|
+</style>
|
chenwen