表格

src/components/table.vue

 <!--
  * @Author: your name
  * @Date: 2021-08-27 15:51:38
- * @LastEditTime: 2021-08-30 15:49:58
+ * @LastEditTime: 2021-08-31 10:40:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\components\table.vue
@@ -13,29 +13,11 @@
         <span class="icon">i</span>
         <span class="sele">已选择{{ selectRow.length }}项</span>
         <span class="serve">服务调用总计：36.4万</span>
-        <el-button
-          @click="toggleSelection()"
-          type="text"
-          size="small"
-          class="btnclear"
-          >清空</el-button
-        >
+        <el-button @click="toggleSelection()" type="text" size="small" class="btnclear">清空</el-button>
       </div>
     </transition>
     <!--表格-->
-    <el-table
-      id="ajzbQuery"
-      v-loading="tableLoading"
-      element-loading-text="拼命加载中"
-      :key="key"
-      ref="itsmDataTable"
-      :data="tableList"
-      tooltip-effect="dark"
-      max-height="600"
-      width="100%"
-      size="small"
-      @selection-change="handleSelectionChange"
-    >
+    <el-table id="ajzbQuery" v-loading="tableLoading" element-loading-text="拼命加载中" :key="key" ref="itsmDataTable" :data="tableList" tooltip-effect="dark" max-height="600" width="100%" size="small" @selection-change="handleSelectionChange">
       <!-- <el-table-column align="center" label="操作" width="200">
       <template slot-scope="scope">
         <div>
@@ -53,124 +35,65 @@
       <!--          </el-table-column>-->
       <el-table-column type="selection" width="55"> </el-table-column>
 
-      <el-table-column
-        v-for="columnTitle in propdefaultFormThead"
-        :prop="columnTitle.prop"
-        :key="columnTitle.label"
-        :label="columnTitle.label"
-        :width="columnTitle.width"
-      >
+      <el-table-column v-for="columnTitle in propdefaultFormThead" :prop="columnTitle.prop" :key="columnTitle.label" :label="columnTitle.label" :width="columnTitle.width">
         <template slot-scope="scope">
           <div v-if="columnTitle.prop == 'jyaq'">
             <div class="ajxq_s">
-              <span class="none" v-html="scope.row[columnTitle.prop]"></span
-              ><a
-                href="javascript:void(0);"
-                onclick='javascript:this.parentNode.style.display="none";this.parentNode.nextSibling.style.display="block"'
-                style="
+              <span class="none" v-html="scope.row[columnTitle.prop]"></span><a href="javascript:void(0);" onclick='javascript:this.parentNode.style.display="none";this.parentNode.nextSibling.style.display="block"' style="
                   display: inline-block;
                   width: 100%;
                   text-align: right;
                   color: #3692c6;
                   font-weight: 600;
-                "
-                id="open"
-                v-show="
+                " id="open" v-show="
                   scope.row[columnTitle.prop] != '' &&
                   scope.row[columnTitle.prop] != null
-                "
-                >展开</a
-              >
+                ">展开</a>
             </div>
             <div class="ajxq_n" style="display: none">
-              <span
-                style="display: block"
-                v-html="scope.row[columnTitle.prop]"
-              ></span
-              ><a
-                href="javascript:void(0);"
-                onclick='javascript:this.parentNode.style.display="none";this.parentNode.previousSibling.style.display="block"'
-                style="float: right; color: #3692c6; font-weight: 600"
-                id="stop"
-                v-show="
+              <span style="display: block" v-html="scope.row[columnTitle.prop]"></span><a href="javascript:void(0);" onclick='javascript:this.parentNode.style.display="none";this.parentNode.previousSibling.style.display="block"' style="float: right; color: #3692c6; font-weight: 600" id="stop" v-show="
                   scope.row[columnTitle.prop] != '' &&
                   scope.row[columnTitle.prop] != null
-                "
-                >收起</a
-              >
+                ">收起</a>
             </div>
           </div>
-          <div
-            v-else-if="columnTitle.prop == 'asjbh'"
-            @click="goDetail(scope.row)"
-            style="
+          <div v-else-if="columnTitle.prop == 'asjbh'" @click="goDetail(scope.row)" style="
               cursor: pointer;
               color: #096cc9;
               font-size: 13px !important;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
-            "
-          >
+            ">
             {{ scope.row[columnTitle.prop] }}
           </div>
           <div v-else v-html="scope.row[columnTitle.prop]"></div>
         </template>
       </el-table-column>
-      <el-table-column fixed="right" label="操作" width="auto">
+      <el-table-column label="操作" width="auto">
         <!-- <template slot-scope="scope">
         <el-button type="text" size="small" @click="del(scope.row)"
           >删除</el-button
         >
       </template> -->
-        <template slot-scope="scope" > 
-          <el-button
-            type="text"
-            size="small"
-            v-if="btnShow=='rymplb'"
-            @click="handleClick(scope.row, 'xq')"
-            >详情</el-button
-          >
-          <el-button
-            type="text"
-            size="small"
-            v-if="btnShow=='rymplb'"
-            @click="handleClick(scope.row, 'fk')"
-            >反馈</el-button
-          >
-          <el-button
-            type="text"
-            size="small"
-            v-if="btnShow=='rymplb'"
-            @click="handleClick(scope.row, 'th')"
-            >退回</el-button
-          >
-         
+        <template slot-scope="scope">
+          <el-button type="text" size="small" v-if="btnShow=='rymplb'" @click="handleClick(scope.row, 'xq')">详情</el-button>
+          <el-button type="text" size="small" v-if="btnShow=='rymplb'" @click="handleClick(scope.row, 'fk')">反馈</el-button>
+          <el-button type="text" size="small" v-if="btnShow=='rymplb'" @click="handleClick(scope.row, 'th')">退回</el-button>
+
           <div class="clearimg" v-if="btnShow=='rwgl'" @click="handleImg(scope.row)">
-            <img :src="clraeImg" alt="" >
+            <img :src="clraeImg" alt="">
           </div>
         </template>
         <!-- <template slot-scope="scope">
         </template> -->
       </el-table-column>
-      
 
       <!--分页-->
     </el-table>
     <div class="pagin">
-      <span class="record"
-        >共{{ tableDataLength }} 条记录 第{{ atPage }}/{{ Tpage }}页</span
-      >
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page.sync="currentPage1"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="page_size"
-        layout="sizes,prev, pager, next"
-        :total="tableDataLength"
-      >
+      <span class="record">共{{ tableDataLength }} 条记录 第{{ atPage }}/{{ Tpage }}页</span>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-sizes="[10, 20, 50, 100]" :page-size="page_size" layout="sizes,prev, pager, next" :total="tableDataLength">
       </el-pagination>
     </div>
   </div>
@@ -193,9 +116,9 @@ export default {
       default: () => '',
     },
   },
-  data() {
+  data () {
     return {
-      clraeImg:require('../assets/img/clear.png'),
+      clraeImg: require('../assets/img/clear.png'),
       tableLoading: false, //loading
       propdefaultFormThead: utils.deepClone(this.cxDefaultFormThead), //表格表头
       tableList: utils.deepClone(this.tableData), //表格内容
@@ -205,24 +128,26 @@ export default {
       currentPage1: 1, //表格页码
       atPage: 1, //当前页数
       curpage: 10, //当前选择要显示的条数
-      selectRow: "", //当前选中的行
+      selectRow: "", //当前选中的行,
     };
   },
+  computed: {
+  },
   methods: {
     /**
      * @description: 当前选中的行数
      * @param {*} val
      * @return {*}
      */
-    handleSelectionChange(val) {
+    handleSelectionChange (val) {
       this.selectRow = val;
       console.log(val);
     },
-    handleSizeChange(val) {
+    handleSizeChange (val) {
       this.curpage = val;
       console.log(`每页 ${val} 条`);
     },
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       this.atPage = val;
       console.log(`当前页: ${val}`);
     },
@@ -231,7 +156,7 @@ export default {
      * @param {*} rows 选择的列数
      * @return {*}
      */
-    toggleSelection(rows) {
+    toggleSelection (rows) {
       if (rows) {
         rows.forEach((row) => {
           this.$refs.itsmDataTable.toggleRowSelection(row);
@@ -246,20 +171,20 @@ export default {
      * @param {*} type 类型
      * @return {*}
      */
-    handleClick(row, type) {
-      this.$emit("init",row,type)
+    handleClick (row, type) {
+      this.$emit("init", row, type)
       console.log(row, type);
     },
-    handleImg(row){
-       this.$emit("init",row)
+    handleImg (row) {
+      this.$emit("init", row)
       console.log('图片的删除');
     }
   },
-  mounted() {
+  mounted () {
     console.log(this.tableList);
   },
   computed: {
-    Tpage() {
+    Tpage () {
       return this.tableDataLength / this.curpage;
     },
   },
@@ -275,7 +200,11 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+$tableWidth: var(--tableWidth, calc(100vw - 400px));
 .tableList /deep/ {
+  // width: $tableWidth;
+  position: absolute;
+  width: 100%;
   padding: 0 24px 0 24px;
   .el-pagination {
     text-align: right;

src/store/index.js

@@ -8,7 +8,7 @@ Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
-    user
+    user,
   },
   getters,
   plugins: [

src/utils/Bus.js

+/*
+ * @Author: your name
+ * @Date: 2021-08-30 20:41:50
+ * @LastEditTime: 2021-08-30 20:41:50
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\utils\Bus.js
+ */
+import Vue from 'vue'
+const Bus = new Vue()
+export default Bus 

src/views/Home.vue

 <!--
  * @Author: your name
  * @Date: 2021-08-27 14:14:36
- * @LastEditTime: 2021-08-28 23:07:31
+ * @LastEditTime: 2021-08-31 10:41:21
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\views\Home.vue
@@ -65,7 +65,8 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters } from 'vuex'
+import Bus from "@/utils/Bus.js";
 import indexRoutes from "@/router/modules/index";
 export default {
   name: "Home",
@@ -89,8 +90,8 @@ export default {
      * @description: 调回任务管理
      * @param {*}
      * @return {*}
-     */    
-    goManager() {
+     */
+    goManager () {
       this.$router.push('/Home/rwgl/rwglindex')
       this.menuActive = ''
     },
@@ -114,7 +115,7 @@ export default {
       })
       this.paths = res
       console.log(pathName == this.$route.meta.title);
-      if(pathName == this.$route.meta.title) {
+      if (pathName == this.$route.meta.title) {
         this.$router.push('/Home/rwgl/rwglindex')
         this.$refs.menu.activeIndex = '';
       }
@@ -132,9 +133,10 @@ export default {
      * @description: 展开收缩
      * @param {*}
      * @return {*}
-     */    
+     */
     switchCollapse () {
       this.isCollapse = !this.isCollapse
+      Bus.$emit('isCollapse', this.isCollapse)
     },
     handleOpen (key, keyPath) {
       console.log(key, keyPath);
@@ -210,6 +212,7 @@ export default {
   .home {
     display: flex;
     background: #F6F8FA;
+    flex: auto;
     overflow: hidden;
     .logo {
       display: flex;
@@ -316,6 +319,7 @@ export default {
       }
       .content {
         flex: 1;
+        position: relative;
         background: #FFFFFF;
         border-radius: 8px;
         margin: 24px;

src/views/rwgl/rwglindex.vue

 <!--
  * @Author: your name
  * @Date: 2021-08-28 21:28:08
- * @LastEditTime: 2021-08-30 17:25:44
+ * @LastEditTime: 2021-08-31 10:39:17
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\views\rwgl\rwglindex.vue