xq

src/components/table.vue

 <!--
  * @Author: your name
  * @Date: 2021-08-27 15:51:38
- * @LastEditTime: 2021-09-01 20:41:33
+ * @LastEditTime: 2021-09-02 10:08:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\components\table.vue
@@ -11,25 +11,83 @@
     <transition name="fade">
       <div class="clear" v-if="selectRow.length > 0">
         <span class="icon">i</span>
-        <span class="sele">已选择
-          <span style="color: #006aff">{{ selectRow.length }}</span> 项</span>
+        <span class="sele"
+          >已选择
+          <span style="color: #006aff">{{ selectRow.length }}</span> 项</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" :cell-class-name="addClass">
-      <el-table-column type="selection" width="55" v-if="btnShow && btnShow!='rwthcl'">
+    <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"
+      :cell-class-name="addClass"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        v-if="btnShow && btnShow != 'rwthcl'"
+      >
       </el-table-column>
-      <el-table-column v-for="columnTitle in propdefaultFormThead" :prop="columnTitle.prop" :key="columnTitle.label" :label="columnTitle.label" :width="columnTitle.width" sortable:true>
+      <el-table-column
+        v-for="columnTitle in propdefaultFormThead"
+        :prop="columnTitle.prop"
+        :key="columnTitle.label"
+        :label="columnTitle.label"
+        :width="columnTitle.width"
+        sortable:true
+      >
       </el-table-column>
-      <el-table-column label="操作" width="auto" v-if="btnShow && btnShow!='sdxfrw'">
+      <el-table-column
+        label="操作"
+        width="auto"
+        v-if="btnShow && btnShow != 'sdxfrw'"
+      >
         <template slot-scope="scope">
-          <el-button type="text" size="small" v-if="btnShow == 'rymplb' || btnShow == 'rwthcl'" @click="handleClick(scope.row, 'xq')">详情</el-button>
-          <el-button type="text" size="small" v-if="btnShow == 'rymplb' || btnShow == 'rwthcl'" @click="handleClick(scope.row, 'fk')">反馈</el-button>
-          <el-button type="text" size="small" v-if="btnShow == 'rymplb' || btnShow == 'rwthcl'" @click="handleClick(scope.row, 'th')">退回</el-button>
+          <el-button
+            type="text"
+            size="small"
+            v-if="btnShow == 'rymplb' || btnShow == 'rwthcl'"
+            @click="handleClick(scope.row, 'xq')"
+            >详情</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            v-if="btnShow == 'rymplb' || btnShow == 'rwthcl'"
+            @click="handleClick(scope.row, 'fk')"
+            >反馈</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            v-if="btnShow == 'rymplb' || btnShow == 'rwthcl'"
+            @click="handleClick(scope.row, 'th')"
+            >退回</el-button
+          >
 
-          <div class="clearimg" v-if="btnShow == 'rwgl'" @click="handleImg(scope.row)">
+          <div
+            class="clearimg"
+            v-if="btnShow == 'rwgl'"
+            @click="handleImg(scope.row)"
+          >
             <img :src="clraeImg" alt="" />
           </div>
         </template>
@@ -43,8 +101,19 @@
     </div>
     <!--分页-->
     <div class="pagin" v-if="isShowpagin == 'rympfk' ? false : true">
-      <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>
@@ -75,7 +144,7 @@ export default {
       default: () => "",
     },
   },
-  data () {
+  data() {
     return {
       age: "28",
       clraeImg: require("../assets/img/clear.png"),
@@ -93,13 +162,12 @@ export default {
   },
   computed: {},
   methods: {
-    addClass ({ row, column, rowIndex, columnIndex }) {
-      console.log(column.label);
-      if (column.label == '退回') {
-        console.log('000');
-        return 'redBg'
-      } else if (column.label == '完成进度') {
-        return 'blueBg'
+    addClass({ row, column, rowIndex, columnIndex }) {
+      if (column.label == "退回") {
+        console.log("000");
+        return "redBg";
+      } else if (column.label == "完成进度") {
+        return "blueBg";
       }
     },
     /**
@@ -107,15 +175,16 @@ export default {
      * @param {*} val
      * @return {*}
      */
-    handleSelectionChange (val) {
+    handleSelectionChange(val) {
       this.selectRow = val;
+      this.$emit("selectInit", val);
       console.log(val);
     },
-    handleSizeChange (val) {
+    handleSizeChange(val) {
       this.curpage = val;
       console.log(`每页 ${val} 条`);
     },
-    handleCurrentChange (val) {
+    handleCurrentChange(val) {
       this.atPage = val;
       console.log(`当前页: ${val}`);
     },
@@ -124,7 +193,7 @@ export default {
      * @param {*} rows 选择的列数
      * @return {*}
      */
-    toggleSelection (rows) {
+    toggleSelection(rows) {
       if (rows) {
         rows.forEach((row) => {
           this.$refs.itsmDataTable.toggleRowSelection(row);
@@ -139,20 +208,20 @@ export default {
      * @param {*} type 类型
      * @return {*}
      */
-    handleClick (row, type) {
+    handleClick(row, type) {
       this.$emit("init", row, type);
       console.log(row, type);
     },
-    handleImg (row) {
+    handleImg(row) {
       this.$emit("init", row);
       console.log("图片的删除");
     },
   },
-  mounted () {
+  mounted() {
     console.log(this.tableList);
   },
   computed: {
-    Tpage () {
+    Tpage() {
       return this.tableDataLength / this.curpage;
     },
   },
@@ -167,13 +236,13 @@ export default {
 };
 </script>
 
-<style lang='scss' >
-	.redBg {
-			color: #E02020;
-		}
-    .blueBg{
+<style lang='scss' scoped>
+.redBg {
+  color: #e02020;
+}
+.blueBg {
   color: blue;
-    }
+}
 $tableWidth: var(--tableWidth, calc(100vw - 400px));
 .tableList /deep/ {
   // width: $tableWidth;
@@ -200,7 +269,7 @@ $tableWidth: var(--tableWidth, calc(100vw - 400px));
   //   // margin: 0px auto;
   // }
 }
-  .clear {
+.clear {
   height: 40px;
   width: 100%;
   background: #ddebff;
@@ -248,7 +317,7 @@ $tableWidth: var(--tableWidth, calc(100vw - 400px));
   .el-table th.is-center {
     text-align: left;
   }
-  }
+}
 .pagin {
   position: fixed;
   bottom: 40px;
@@ -258,11 +327,11 @@ $tableWidth: var(--tableWidth, calc(100vw - 400px));
   align-items: center;
   width: 80%;
   // margin: 0px auto;
-    .record{
-      margin-left:24px ;
-    }
+  .record {
+    margin-left: 24px;
   }
-  .clearimg {
+}
+.clearimg {
   width: 12px;
   img {
     width: 12px;
@@ -270,7 +339,7 @@ $tableWidth: var(--tableWidth, calc(100vw - 400px));
     object-fit: cover;
     cursor: pointer;
   }
-  }
+}
 .slotbtn {
   display: flex;
   justify-content: flex-end;