流程中心表格列渲染bug修改，自适应宽度

src/views/userCenter/processCenter/finishProcess.vue

@@ -1,85 +1,26 @@
 <template>
     <div>
-    <el-table
+        <el-table :data="tableData" style="width: 100%" border
-    :data="tableData"
+            :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
-    style="width: 100%"
+            <el-table-column prop="processId" label="流程编号"  align="center">
-    border
-    :header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
-    >
-    <el-table-column
-      prop="processId"
-      label="流程编号"
-      width="150"
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="processName" label="流程名称" align="center">
-      prop="processName"
-      label="流程名称"
-    
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="processPerson" label="发起人"  align="center">
-      prop="processPerson"
-      label="发起人"
-      width="220"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="now" label="当前处理人"  align="center">
-      prop="now"
-      label="当前处理人"
-      width="190"
-      align="center"
-      
-      >
             </el-table-column>
-      <el-table-column
+            <el-table-column prop="last" label="上一处理人"  align="center">
-      prop="last"
-      label="上一处理人"
-      width="180"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
-      prop="createTime"
-      label="创建时间"
-      width="180"
-      sortable
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
-      prop="endTime"
-      label="完成时间"
-      width="170"
-      sortable
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="status" label="状态"  align="center">
-      prop="status"
-      label="状态"
-      width="125"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column label="操作" width="120" align="center">
-    fixed="right"
-      label="操作"
-      width="120"
-      align="center">
                 <template slot-scope="scope">
-        <el-button
+                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
-          @click.native.prevent="view(scope.$index, tableData)"
-          type="text"
-          size="small">
                         查看
                     </el-button>
                 </template>
@@ -124,6 +65,9 @@
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="scss" scoped>
+::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
+   height: 0px !important;
 
+}
 </style>

src/views/userCenter/processCenter/gencyProcess.vue

@@ -1,52 +1,21 @@
 <template>
   <div>
-    <el-table
+    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
-    :data="tableData"
+      background: '#DFE6EC',
-    style="width: 100%"
+      fontWeight: '700',
-    border
+      color: '#1F2D3D',
-    :header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
+    }">
-    >
+      <el-table-column prop="processId" label="流程编号"  align="center">
-    <el-table-column
-      prop="processId"
-      label="流程编号"
-      width="150"
-      align="center"
-      >
       </el-table-column>
-    <el-table-column
+      <el-table-column prop="processName" label="流程名称" align="left">
-      prop="processName"
-      label="流程名称"
-      
-      align="left"
-      >
       </el-table-column>
-    <el-table-column
+      <el-table-column prop="processPerson" label="发起人"  align="center">
-      prop="processPerson"
-      label="发起人"
-      width="390"
-      align="center"
-      
-      >
       </el-table-column>
-    <el-table-column
+      <el-table-column prop="createTime" label="创建时间" sortable align="center">
-      prop="createTime"
-      label="创建时间"
-      width="260"
-      sortable
-      align="center"
-      
-      >
       </el-table-column>
-    <el-table-column
+      <el-table-column  label="操作" width="120" align="center">
-      fixed="right"
-      label="操作"
-      width="120"
-      align="center">
         <template slot-scope="scope">
-        <el-button
+          <el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
-          @click.native.prevent="handle(scope.$index, tableData)"
-          type="text"
-          size="small">
             办理
           </el-button>
         </template>
@@ -57,40 +26,48 @@
 
 <script>
 export default {
-        name:'gencyProcess',
+  name: "gencyProcess",
   data() {
     return {
-        tableData: [{
+      tableData: [
-            processId: '2016-05-1',
+        {
-            processName: '王小虎',
+          processId: "2016-05-1",
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+          processName: "王小虎",
-            createTime:'2023-1-1'
+          processPerson: "上海市普陀区金沙江路 1518 弄",
-        }, {
+          createTime: "2023-1-1",
-            processId: '2016-05-2',
+        },
-            processName: '王小虎',
+        {
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+          processId: "2016-05-2",
-            createTime:'2023-1-2'
+          processName: "王小虎",
-        }, {
+          processPerson: "上海市普陀区金沙江路 1518 弄",
-            processId: '2016-05-3',
+          createTime: "2023-1-2",
-            processName: '王小虎',
+        },
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+        {
-            createTime:'2023-1-3'
+          processId: "2016-05-3",
-        }, {
+          processName: "王小虎",
-            processId: '2016-05-4',
+          processPerson: "上海市普陀区金沙江路 1518 弄",
-            processName: '王小虎',
+          createTime: "2023-1-3",
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+        },
-            createTime:'2023-1-4'
+        {
-        }]
+          processId: "2016-05-4",
-      }
+          processName: "王小虎",
+          processPerson: "上海市普陀区金沙江路 1518 弄",
+          createTime: "2023-1-4",
+        },
+      ],
+    };
   },
   methods: {
     handle() {
-            alert(111)
+      alert(111);
-        }
+    },
-    }
+  },
-    }
+};
 </script>
 
-<style lang="sass" scoped>
+<style lang="scss" scoped>
+::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
+   height: 0px !important;
 
+}
 </style>

src/views/userCenter/processCenter/monitorProcesses.vue

@@ -1,94 +1,33 @@
 <template>
     <div>
-    <el-table
+        <el-table :data="tableData" style="width: 100%" border
-    :data="tableData"
+            :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
-    style="width: 100%"
+            <el-table-column prop="processId" label="流程编号" align="center">
-    border
-    :header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
-    >
-    <el-table-column
-      prop="processId"
-      label="流程编号"
-     
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="processName" label="流程名称"  align="center">
-      prop="processName"
-      label="流程名称"
-      width="220"
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="processPerson" label="发起人" align="center">
-      prop="processPerson"
-      label="发起人"
-      width="220"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="now" label="当前处理人"  align="center">
-      prop="now"
-      label="当前处理人"
-      width="190"
-      align="center"
-      
-      >
             </el-table-column>
-      <el-table-column
+            <el-table-column prop="last" label="上一处理人"  align="center">
-      prop="last"
-      label="上一处理人"
-      width="180"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
-      prop="createTime"
-      label="创建时间"
-      width="180"
-      sortable
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
-      prop="endTime"
-      label="完成时间"
-      width="170"
-      sortable
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="status" label="状态"  align="center">
-      prop="status"
-      label="状态"
-      width="125"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column  label="操作" width="120" align="center">
-      fixed="right"
-      label="操作"
-      width="120"
-      align="center">
                 <template slot-scope="scope">
-        <el-button
+                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
-          @click.native.prevent="view(scope.$index, tableData)"
+                        查看
-          type="text"
-          size="small"
-          >
-          <span>查看</span>
                     </el-button>
                 </template>
             </el-table-column>
         </el-table>
     </div>
 </template>
-
 <script>
 export default {
     name: 'monitorProcess',
@@ -125,6 +64,9 @@
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="scss" scoped>
+ ::v-deep .el-table__fixed,.el-table__fixed-right ::before{
+   height: 0px !important;
 
+}
 </style>

src/views/userCenter/processCenter/sentProcess.vue

@@ -1,145 +1,89 @@
 <template>
     <div>
-    <el-table
+        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
-    :data="tableData"
+            background: '#DFE6EC',
-    style="width: 100%"
+            fontWeight: '700',
-    border
+            color: '#1F2D3D',
-    :header-cell-style="{background:'#DFE6EC',fontWeight:'700',color:'#1F2D3D'}"
+        }">
-    >
+            <el-table-column prop="processId" label="流程编号"  align="center">
-    <el-table-column
-      prop="processId"
-      label="流程编号"
-      width="150"
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="processName" label="流程名称" align="center">
-      prop="processName"
-      label="流程名称"
-      
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="processPerson" label="发起人"  align="center">
-      prop="processPerson"
-      label="发起人"
-      width="220"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="now" label="当前处理人"  align="center">
-      prop="now"
-      label="当前处理人"
-      width="190"
-      align="center"
-      
-      >
             </el-table-column>
-      <el-table-column
+            <el-table-column prop="last" label="上一处理人"  align="center">
-      prop="last"
-      label="上一处理人"
-      width="180"
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
-      prop="createTime"
-      label="创建时间"
-      width="180"
-      sortable
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="endTime" label="完成时间" sortable align="center">
-      prop="endTime"
-      label="完成时间"
-      width="170"
-      sortable
-      align="center"
-      
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column prop="status" label="状态"  align="center">
-      prop="status"
-      label="状态"
-      width="125"
-      align="center"
-      >
             </el-table-column>
-    <el-table-column
+            <el-table-column  label="操作" width="120" align="center">
-      fixed="right"
-      label="操作"
-      width="120"
-      align="center">
                 <template slot-scope="scope">
-            <el-button
+                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
-          @click.native.prevent="view(scope.$index, tableData)"
+                        查看
-          type="text"
-          size="small"
-          >
-          <span>查看</span>
                     </el-button>
 
-        <el-button
+                    <el-button @click.native.prevent="back(scope.$index, tableData)" type="text" size="small"
-          @click.native.prevent="back(scope.$index, tableData)"
+                        style="color: rgb(236, 128, 141)">
-          type="text"
+                        强制撤回
-          size="small"
-          >
-          <span>强制撤回</span>
                     </el-button>
-      
                 </template>
             </el-table-column>
-
-    
         </el-table>
     </div>
 </template>
 
 <script>
 export default {
-        name:'sentProcess',
+    name: "sentProcess",
     data() {
         return {
-        tableData: [{
+            tableData: [
-            processId: '2016-05-1',
+                {
-            processName: '王小虎',
+                    processId: "2016-05-1",
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+                    processName: "王小虎",
-            createTime:'2023-1-1'
+                    processPerson: "上海市普陀区金沙江路 1518 弄",
-        }, {
+                    createTime: "2023-1-1",
-            processId: '2016-05-2',
+                },
-            processName: '王小虎',
+                {
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+                    processId: "2016-05-2",
-            createTime:'2023-1-2'
+                    processName: "王小虎",
-        }, {
+                    processPerson: "上海市普陀区金沙江路 1518 弄",
-            processId: '2016-05-3',
+                    createTime: "2023-1-2",
-            processName: '王小虎',
+                },
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+                {
-            createTime:'2023-1-3'
+                    processId: "2016-05-3",
-        }, {
+                    processName: "王小虎",
-            processId: '2016-05-4',
+                    processPerson: "上海市普陀区金沙江路 1518 弄",
-            processName: '王小虎',
+                    createTime: "2023-1-3",
-            processPerson: '上海市普陀区金沙江路 1518 弄',
+                },
-            createTime:'2023-1-4'
+                {
-        }]
+                    processId: "2016-05-4",
-      }
+                    processName: "王小虎",
+                    processPerson: "上海市普陀区金沙江路 1518 弄",
+                    createTime: "2023-1-4",
+                },
+            ],
+        };
     },
     methods: {
         view() {
-            alert(111)
+            alert(111);
         },
         back() {
-            alert(222)
+            alert(222);
-        }
+        },
-    }
+    },
-    }
+};
 </script>
 
 <style lang="scss" scoped>
-.slot{
+::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
+   height: 0px !important;
 
 }
 </style>