style:table表格样式

@@ -10,18 +10,18 @@
 
 <template>
   <div :class="['lb-table', customClass]">
-    <el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border'
-      :row-class-name="tableRowClassName" :show-header='showHeader'
+    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
+      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader'
       :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
       :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
       <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
       </lb-column>
     </el-table>
 
-    <el-table v-else ref="elTable" class="table-fixed" :border='border' :row-class-name="tableRowClassName"
-      :show-header='showHeader' :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs"
-      :max-height="maxHeight" v-on="$listeners" :data="data" style="width: 100%"
-      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+    <el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
+      :row-class-name="tableRowClassName" :show-header='showHeader'
+      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :max-height="maxHeight"
+      v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
       <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
       </lb-column>
     </el-table>

@@ -5,30 +5,45 @@
         {{ title }}
         <div class="checkbox">
           <el-checkbox-group v-model="checkList" @change="checkChange">
-            <el-checkbox
-              v-for="item in qsztList"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}</el-checkbox
-            >
+            <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
           </el-checkbox-group>
         </div>
       </div>
       <div class="xxTableBox">
+        <!-- 固定前三个 -->
         <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
             <td>
               {{ item.label }}
             </td>
-            <td
-              v-for="(row, index) in tableData"
-              :key="index"
-              :class="[
+            <td v-for="(row, index) in tableData" :key="index" :class="[
               row.qszt == '2' ? 'lishi' : '',
               row.qszt == '0' ? 'linshi' : '',
               item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-              ]"
-            >
+            ]">
+              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
+                正在办理
+              </div>
+              <span v-if="item.prop == 'qszt'">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+
+              <span v-else> {{ row[item.prop] }}</span>
+            </td>
+            <td v-for="count in emptycolNum" :key="~count"></td>
+          </tr>
+        </table>
+
+        <table class="xxTable rollTable">
+          <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
+            <td>
+              {{ item.label }}
+            </td>
+            <td v-for="(row, index) in tableData" :key="index" :class="[
+              row.qszt == '2' ? 'lishi' : '',
+              row.qszt == '0' ? 'linshi' : '',
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+            ]">
               <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                 正在办理
               </div>
@@ -50,7 +65,7 @@
 import { getJsydsyqList } from "@/api/registerBook.js";
 import { datas } from "./qlxxFormData.js";
 export default {
-  data() {
+  data () {
     return {
       title: "建设用地使用权、宅基地使用权登记信息",
       qsztList: datas.columns().qsztList,
@@ -65,11 +80,11 @@ export default {
       columns: datas.columns().JSYDSYQ,
     };
   },
-  created() {
+  created () {
     this.loadData();
   },
   methods: {
-    loadData() {
+    loadData () {
       getJsydsyqList({
         bdcdyid: this.propsParam.bdcdyid,
         qllx: this.propsParam.qllx,
@@ -86,7 +101,7 @@ export default {
         }
       });
     },
-   checkChange() {
+    checkChange () {
       if (this.checkList.length === 0) {
         this.tableData = [];
         this.emptycolNum = datas.columns().emptycolNum;
@@ -94,7 +109,7 @@ export default {
         this.loadData();
       }
     },
-    getQsztName(code) {
+    getQsztName (code) {
       let name = "";
       for (let item of this.qsztList) {
         if (item.value == code) {

@@ -5,30 +5,22 @@
         {{ title }}
         <div class="checkbox">
           <el-checkbox-group v-model="checkList" @change="checkChange">
-            <el-checkbox
-              v-for="item in qsztList"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}</el-checkbox
-            >
+            <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
           </el-checkbox-group>
         </div>
       </div>
       <div class="xxTableBox">
+        <!-- 固定前三个 -->
         <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
             <td>
               {{ item.label }}
             </td>
-            <td
-              v-for="(row, index) in tableData"
-              :key="index"
-              :class="[
+            <td v-for="(row, index) in tableData" :key="index" :class="[
               row.qszt == '2' ? 'lishi' : '',
               row.qszt == '0' ? 'linshi' : '',
               item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-              ]"
-            >
+            ]">
               <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                 正在办理
               </div>
@@ -41,6 +33,30 @@
             <td v-for="count in emptycolNum" :key="~count"></td>
           </tr>
         </table>
+
+        <table class="xxTable rollTable">
+          <tr v-for="(item, colindex) in columnsslice(3)" :key="colindex">
+            <td>
+              {{ item.label }}
+            </td>
+            <td v-for="(row, index) in tableData" :key="index" :class="[
+              row.qszt == '2' ? 'lishi' : '',
+              row.qszt == '0' ? 'linshi' : '',
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+            ]">
+              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
+                正在办理
+              </div>
+              <span v-if="item.prop == 'qszt'">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+
+              <span v-else> {{ row[item.prop] }}</span>
+            </td>
+            <td v-for="count in emptycolNum" :key="~count"></td>
+          </tr>
+        </table>
+
       </div>
     </div>
   </div>
@@ -50,7 +66,7 @@
 import { getFdcq2List } from "@/api/registerBook.js";
 import { datas } from "./qlxxFormData.js";
 export default {
-  data() {
+  data () {
     return {
       title: "房地产权登记信息（独幢、层、套、间房屋）",
       qsztList: datas.columns().qsztList,
@@ -65,11 +81,11 @@ export default {
       columns: datas.columns().FDCQ2,
     };
   },
-  created() {
+  created () {
     this.loadData();
   },
   methods: {
-    loadData() {
+    loadData () {
       getFdcq2List({
         bdcdyid: this.propsParam.bdcdyid,
         qllx: this.propsParam.qllx,
@@ -86,7 +102,7 @@ export default {
         }
       });
     },
-    checkChange() {
+    checkChange () {
       if (this.checkList.length === 0) {
         this.tableData = [];
         this.emptycolNum = datas.columns().emptycolNum;
@@ -94,7 +110,7 @@ export default {
         this.loadData();
       }
     },
-    getQsztName(code) {
+    getQsztName (code) {
       let name = "";
       for (let item of this.qsztList) {
         if (item.value == code) {

@@ -5,30 +5,45 @@
         {{ title }}
         <div class="checkbox">
           <el-checkbox-group v-model="checkList" @change="checkChange">
-            <el-checkbox
-              v-for="item in qsztList"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}</el-checkbox
-            >
+            <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
           </el-checkbox-group>
         </div>
       </div>
       <div class="xxTableBox">
+        <!-- 固定前三个 -->
         <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
             <td>
               {{ item.label }}
             </td>
-            <td
-              v-for="(row, index) in tableData"
-              :key="index"
-              :class="[
+            <td v-for="(row, index) in tableData" :key="index" :class="[
               row.qszt == '2' ? 'lishi' : '',
               row.qszt == '0' ? 'linshi' : '',
               item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
-              ]"
-            >
+            ]">
+              <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
+                正在办理
+              </div>
+              <span v-if="item.prop == 'qszt'">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+
+              <span v-else> {{ row[item.prop] }}</span>
+            </td>
+            <td v-for="count in emptycolNum" :key="~count"></td>
+          </tr>
+        </table>
+
+        <table class="xxTable rollTable">
+          <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
+            <td>
+              {{ item.label }}
+            </td>
+            <td v-for="(row, index) in tableData" :key="index" :class="[
+              row.qszt == '2' ? 'lishi' : '',
+              row.qszt == '0' ? 'linshi' : '',
+              item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
+            ]">
               <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
                 正在办理
               </div>
@@ -50,7 +65,7 @@
 import { getJsydsyqList } from "@/api/registerBook.js";
 import { datas } from "./qlxxFormData.js";
 export default {
-  data() {
+  data () {
     return {
       title: "建设用地使用权、宅基地使用权登记信息",
       qsztList: datas.columns().qsztList,
@@ -65,11 +80,11 @@ export default {
       columns: datas.columns().JSYDSYQ,
     };
   },
-  created() {
+  created () {
     this.loadData();
   },
   methods: {
-    loadData() {
+    loadData () {
       getJsydsyqList({
         bdcdyid: this.propsParam.bdcdyid,
         qllx: this.propsParam.qllx,
@@ -86,7 +101,7 @@ export default {
         }
       });
     },
-    checkChange() {
+    checkChange () {
       if (this.checkList.length === 0) {
         this.tableData = [];
         this.emptycolNum = datas.columns().emptycolNum;
@@ -94,7 +109,7 @@ export default {
         this.loadData();
       }
     },
-    getQsztName(code) {
+    getQsztName (code) {
       let name = "";
       for (let item of this.qsztList) {
         if (item.value == code) {

@@ -105,13 +105,19 @@
                 z-index: 10;
             }
 
+            tr {
+                display: flex;
+            }
+
             tr td {
-                border: 1px solid #ccc;
+                border: 1px solid rgb(227, 226, 226);
                 text-align: center;
                 height: 40px;
                 padding: 4px;
                 font-size: 13px;
                 width: 140px;
+                flex: 1;
+                width: 100%;
             }
 
             >tr:nth-child(odd) td {
@@ -130,5 +136,12 @@
                 color: #7f7f7f;
             }
         }
+
+        .rollTable {
+            margin-top: -2px;
+            display: block;
+            height: calc(100vh - 300px);
+            overflow-y: scroll;
+        }
     }
 }
\ No newline at end of file

@@ -426,7 +426,6 @@ export default {
     },
     //表单选项卡事件
     beforeLeave (activeName, oldActiveName) {
-      console.log(this.oldDetail, this.newDetail);
       if (!_.isEqual(this.oldDetail, this.newDetail)) {
         this.$message.error('界面内容有所变化,请先保存')
         return false
@@ -436,6 +435,7 @@ export default {
     },
     //切换选项卡内容组件
     getFromRouter (tabname) {
+      console.log(tabname, 'tabnametabname');
       this.componentTag = getForm(tabname, this.$route.query.sqywbm);
     },
     //发送下一个环节