瀏覽代碼

wanda-adm:feat > 完善表格

shaun-sheep 4 年之前
父節點
當前提交
ba1a059734

+ 28 - 12
src/components/public/adm-multi-table.vue

@@ -3,7 +3,8 @@
         :data="tableData"
         style="width: 100%"
         class="adm-multi-table"
-        size="mini"
+        :row-style="{ height: '10px' }"
+        border
     >
         <el-table-column
             prop="date"
@@ -22,19 +23,25 @@
         </el-table-column>
         <el-table-column label="基础信息台账">
             <el-table-column
+                show-overflow-tooltip
                 prop="province"
                 label="省份"
-                width="120">
+                fixed
+            >
             </el-table-column>
             <el-table-column
+                show-overflow-tooltip
                 prop="city"
                 label="市区"
-                width="120">
+                fixed
+            >
             </el-table-column>
             <el-table-column
+                show-overflow-tooltip
                 prop="zip"
                 label="邮编"
-                width="120">
+                fixed
+            >
             </el-table-column>
 
         </el-table-column>
@@ -42,21 +49,22 @@
             <el-table-column
                 prop="province"
                 label="省份"
-                width="120">
+                show-overflow-tooltip
+            >
             </el-table-column>
             <el-table-column
                 prop="city"
                 label="市区"
-                width="120">
+                show-overflow-tooltip
+            >
             </el-table-column>
             <el-table-column
                 prop="zip"
                 label="邮编"
-                width="120">
+                show-overflow-tooltip
+            >
             </el-table-column>
-
         </el-table-column>
-
     </el-table>
 </template>
 
@@ -67,13 +75,21 @@ import { Vue, Component, Prop, Emit } from "vue-property-decorator";
 })
 export default class extends Vue {
     // 表格数据
-    @Prop({ default: [] }) tableData ?: []
+    @Prop({ default: Array }) tableData ?: []
     // 当前页头文字
     @Prop({ default: '' }) currentHeader ?: string
+
+
 }
 
 </script>
 
-<style scoped lang="scss">
-
+<style lang="scss">
+.adm-multi-table {
+    .el-table__row {
+        td {
+            padding: 0;
+        }
+    }
+}
 </style>

+ 1 - 1
src/components/public/adm-pagination.vue

@@ -1,7 +1,7 @@
 <template>
     <el-pagination
         class="adm-pagination"
-        :current-page="currentPage"
+        @current-change="currentPage"
         :page-sizes="paginationList.sizes"
         :page-size="paginationList.size"
         layout="total,sizes,prev,pager,next,jumper"

+ 5 - 1
src/views/maintain/device/index.vue

@@ -11,7 +11,7 @@
             <admTabs :paneMsg="paneMsg" @paneValue="paneValue"/>
             <div class="table">
                 <admMultiTable :currentHeader="currentHeader" :tableData="tableData"/>
-                <Pagination :paginationList="paginationList"/>
+                <Pagination :paginationList="paginationList" @currentPage="currentPage"/>
             </div>
         </div>
     </div>
@@ -118,6 +118,10 @@ export default class extends Vue {
     SearchValue(val: string) {
         console.log(val)
     }
+    // 当前分页
+    currentPage(val:number) {
+        console.log(val)
+    }
 }
 </script>
 <style lang="scss" scoped>

+ 19 - 9
src/views/maintain/space/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="space-index">
-        <statistics :statistics-msg="statisticsMsg" />
+        <statistics :statistics-msg="statisticsMsg"/>
         <el-divider class="small-divider"></el-divider>
         <div class="tabs">
             <el-tabs v-model="activeName" type="card">
@@ -9,16 +9,18 @@
             </el-tabs>
             <div class="tab-content">
                 <div class="search">
-                    <el-cascader v-model="value1" :options="options" @change="handleChange" placeholder="请选择楼层" class="item"></el-cascader>
-                    <el-cascader v-model="value2" :options="options" @change="handleChange" placeholder="请选择分区" class="item"
-                        v-if="activeName==='picture'"></el-cascader>
-                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
+                    <el-cascader v-model="value1" :options="options" @change="handleChange" placeholder="请选择楼层"
+                                 class="item"></el-cascader>
+                    <el-cascader v-model="value2" :options="options" @change="handleChange" placeholder="请选择分区"
+                                 class="item"
+                                 v-if="activeName==='picture'"></el-cascader>
+                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'"/>
                 </div>
                 <div v-if="activeName==='table'">
-                    <admMultiTable />
+                    <admMultiTable/>
                 </div>
                 <div class="graph" v-if="activeName==='picture'">
-                    <spaceGraph />
+                    <spaceGraph/>
                 </div>
             </div>
         </div>
@@ -40,8 +42,8 @@ export default class extends Vue {
         total: 93640,
     };
     activeName = "table";
-    value1: ["zhinan", "shejiyuanze"];
-    value2: [];
+    value1 = ["zhinan", "shejiyuanze"];
+    value2 = [];
     options = [
         {
             value: "zhinan",
@@ -62,10 +64,12 @@ export default class extends Vue {
             ],
         },
     ];
+
     // 建筑楼层更改
     handleChange(v) {
         console.log(v);
     }
+
     // 搜索
     searchValue(val: string) {
         console.log(val);
@@ -78,21 +82,27 @@ export default class extends Vue {
     background: #fff;
     padding: 12px;
     height: 100%;
+
     .small-divider {
         margin: 12px 0;
     }
+
     .tabs {
         position: relative;
         height: calc(100% - 92px);
+
         ::v-deep .el-tabs__header {
             margin: 0;
         }
+
         .tab-content {
             height: calc(100% - 41px);
             border: 1px solid #e1e7ea;
             border-top: none;
+
             .search {
                 padding: 16px;
+
                 & > .item + .item {
                     margin-left: 16px;
                 }