s

src/components/Materialman/Materialwarehouse.vue

 <template>
     <div class="Materialwarehouse">
-        <ul class="queryul">
-            <li>
-            <span>
-                <em>仓库名称</em>
+        <div style="text-align:right;border-bottom:1px solid #E2E4EB;padding-bottom:10px">
+            <span class="pageTitle">物料仓库</span>
+            <span @click="morequery=!morequery" style="display:inline-flex;align-items:center;cursor: pointer;" class="f12 cd6">高级查询
+                <img v-show="!morequery" style="width:12px;height:12px" src="../../assets/img/more.png" alt="">
+                <img v-show="morequery" class="roatImg" style="width:12px;height:12px" src="../../assets/img/more.png" alt="">
             </span>
-            <el-input class="w200" size="small" v-model="msg.Name" placeholder="请输入"></el-input>
+            <span  @click="getList" style="margin-left:20px" class="chaxunSpan">查询</span>
+            <!-- <span  @click="chongzhi" style="margin-left:20px" class="addSpan">重置</span> -->
+            <span  @click="addSupplier" style="margin-left:20px" class="addSpan">
+                <img style="width:10px;height:10px;margin-right:6px" src="../../assets/img/add.png" alt="">
+            新增</span>
+        </div>
+        <ul v-show="morequery" class="queryul">
+            <li>          
+                <el-input class="w200" size="small" v-model="msg.Name" placeholder="仓库名称"></el-input>
             </li>
-            <el-button @click="addSupplier" size="small" type="danger">新增</el-button>
-            <el-button @click="getList" size="small">查询</el-button>
         </ul>
-        <vxe-table style="margin-top:20px" :data="tableData" :loading="loading" size="small">
-            <vxe-table-column field="Name" title="仓库名称"></vxe-table-column>
-            <vxe-table-column field="UpdateBy" title="操作人"></vxe-table-column>
-            <vxe-table-column field="UpdateDate" title="操作时间"></vxe-table-column>
-            <vxe-table-column title="操作" width="120">
-                <template v-slot="{ row, rowIndex }">
-                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
-                    <i @click="Edit(row)" class="iconfont icon-xiugai"></i>
-                </el-tooltip>
-                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
-                    <i @click="Delete(row)" class="iconfont icon-shanchu"></i>
-                </el-tooltip>
-                </template>
-            </vxe-table-column>
-        </vxe-table>
-        <vxe-pager
-            :current-change="currentChange"
-            :current-page.sync="currentPage"
-            :page-size.sync="msg.pageSize"
-            :total="total"
-            align="center"
-            :layouts="['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']">
-        </vxe-pager>
+        <table style="margin-top:10px" class="myTable" v-loading="loading" border="0" cellspacing="0" cellpadding="0">
+            <thead>
+                <th>仓库名称</th>
+                <th>操作人</th>
+                <th>操作时间</th>
+                <th width="200">操作</th>
+            </thead>
+            <tbody>
+                <tr v-for="(item,index) in tableData" :key="index">
+                    <td>
+                        <span class="commonStyle hoverSpan1"></span>
+                        {{item.Name}}
+                    </td>
+                    <td>{{item.UpdateBy}}</td>
+                    <td>{{item.UpdateDate}}</td>
+                    <td>
+                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+                            <img @click="Edit(item)" style="width:24px;height:24px" src="../../assets/img/edit.png" alt="">
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                            <img @click="Delete(item)" style="width:24px;height:24px" src="../../assets/img/delete.png" alt="">
+                        </el-tooltip>
+                        <span class="commonStyle hoverSpan2"></span>
+                    </td>
+                </tr>
+                <tr v-show="tableData.length==0">
+                    <td colspan="12" align="center">暂无数据</td>
+                </tr>
+            </tbody>
+        </table>
+       <el-pagination
+        @current-change="currentChange"
+        background
+        layout="prev, pager, next"
+        :total="total">
+        </el-pagination>
 
         <el-dialog
             :title="dialogtitle"
@@ -47,17 +67,16 @@
                     <el-button @click="dialogState=false">取消</el-button>
                 </el-form-item>
             </el-form>
-    </el-dialog>
+        </el-dialog>
     </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Materialwarehouse',
   data(){
       return{
+        morequery:false,
         currentPage:1,
         tableData: [],
         loading:false,
@@ -173,5 +192,26 @@ export default {
 </script>
 
 <style scoped>
-
+.Materialwarehouse .hoverSpan1{
+    left: -20px;
+}
+.Materialwarehouse .hoverSpan2{
+    right: -20px;
+}
+.Materialwarehouse .commonStyle{
+    height:100%;
+    background:#fff;
+    position: absolute;
+    width: 20px;
+    top:0;
+    display: none;
+}
+.Materialwarehouse{
+    background: #F8FAFB;
+    width: 100%;
+    min-height: 100%;
+    position: absolute;
+    padding: 20px 30px;
+    box-sizing: border-box;
+}
 </style>