@leevan/jtui 2.0.3 → 2.0.7-npm

package/packages/jt-table-pc/JtTablePc.vue

@@ -7,6 +7,7 @@
         <vxe-toolbar class="jt-toolbar" :custom="{icon:'jtIcon iconpeizhi41 colStyle'}"></vxe-toolbar>
       </div>
       <vxe-table
+        :header-cell-class-name="headerClass"
         size="mini"
         class="jt-table-class-only"
         v-if="tableType === 'default'"
@@ -78,26 +79,16 @@
           fixed="left"
           ></vxe-table-column>
           <!-- 后台数据列 -->
-          <template v-for="(item,index) in data.retjson.header">
-            <vxe-table-column 
-            :edit-render="item.edit"
-            :key="index"
-            show-overflow
-            :field="item.prop"
-            :align="item.align"
-            :title="item.label"
-            :type="item.html ? 'html': ''"
-            :min-width="item.width"
-            :sortable="item.isSort"
-            :visible="item.width!=0"
-            :fixed="item.isFixed"
-            :filters="filterData(item.filterRender)"
-            :filter-render="{name: item.filterRender}"
-            :formatter="formatEnum"
-            :cell-render="cellRenderData(item.cellRender)"
-            >
-            </vxe-table-column>
-          </template>
+          <template v-for="(item,index) in data.retjson.header"> 
+            <table-column 
+              :item="item" 
+              :key="index" 
+              :index="index"
+              :cellRenderData="cellRenderData" 
+              :filterData="filterData"
+              :formatEnum="formatEnum"
+            ></table-column>  
+            </template>
           <!-- 展开行 -->
           <vxe-table-column 
           v-if="expandConfig.isOpen"
@@ -170,6 +161,7 @@
       </vxe-table>
       <!-- 大数据 -->
       <vxe-table
+       :header-cell-class-name="headerClass"
         size="mini"
         class="jt-table-class-only"
         v-if="tableType === 'bigData'"
@@ -191,6 +183,7 @@
         }"
         highlight-current-row
         highlight-current-column
+        
         :radio-config="{checkRowKey: null}"
         :keyboard-config="{isArrow: true}"
         export-config
@@ -236,24 +229,15 @@
           fixed="left"
           ></vxe-table-column>
           <!-- 后台数据列 -->
-          <template v-for="(item,index) in data.retjson.header">
-            <vxe-table-column 
-            :edit-render="item.edit"
-            :key="index"
-            show-overflow
-            :type="item.html ? 'html': ''"
-            :field="item.prop"
-            :align="item.align"
-            :title="item.label"
-            :min-width="item.width"
-            :sortable="item.isSort"
-            :visible="item.width!=0"
-            :fixed="item.isFixed"
-            :filters="filterData(item.filterRender)"
-            :filter-render="{name: item.filterRender}"
-            :formatter="formatEnum"
-            >
-            </vxe-table-column>
+          <template v-for="(item, index) in data.retjson.header">
+            <table-column 
+              :item="item" 
+              :key="index" 
+              :index="index"
+              :cellRenderData="cellRenderData" 
+              :filterData="filterData"
+              :formatEnum="formatEnum"
+            ></table-column>   
           </template>
           <!-- 操作列 -->
           <vxe-table-column title="操作" 
@@ -642,10 +626,14 @@
 
 <script>
 import XEUtils from 'xe-utils';
+import tableColumn from './components/tableColumn.vue'
 import axios from 'axios';
 import { importData } from './importData';
 export default {
   name: 'jt-table-pc',
+  components: {
+    tableColumn
+  },
   created () {
     if(this.isPage){
       this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
@@ -835,7 +823,8 @@ export default {
   },
   data(){
     return {
-      tableData:this.data.DataArray, //表格数据
+      tableData: this.data.DataArray, //表格数据
+      headerClass: (this.data.retjson.header || []).find(i => (i.children || []).length) ? 'has-sub-header' : 'normal-header',
       colNum:0,//当前列的数量
       leftCol:0,//从左起计算合并列的基数
       //分组表格的配置
@@ -1440,4 +1429,7 @@ export default {
 .isWrap .vxe-header--row .vxe-cell{
   flex-wrap: wrap;
 }
+.vxe-table--header .vxe-header--row {
+  background: #fff;
+}
 </style>

package/packages/jt-table-pc/components/tableColumn.vue

@@ -0,0 +1,118 @@
+<!-- 后台数据列 -->
+<template>
+  <!-- <template v-for="(item,index) in data.retjson.header"> -->
+  <vxe-colgroup
+    v-if="item.children && item.children.length"
+    :title="item.label"
+    :key="index"
+  >
+    <template v-for="(subItem, subIndex) in item.children">
+      <vxe-colgroup
+        v-if="subItem.children && subItem.children.length"
+        :title="subItem.label"
+        :key="subIndex"
+      >
+        <vxe-table-column
+          v-for="(subSubItem, subSubIndex) in subItem.children"
+          :edit-render="subSubItem.edit"
+          :key="subSubIndex"
+          show-overflow
+          :field="subSubItem.prop"
+          :align="subSubItem.align"
+          :title="subSubItem.label"
+          :type="subSubItem.html ? 'html': ''"
+          :min-width="subSubItem.width"
+          :sortable="subSubItem.isSort"
+          :visible="subSubItem.width!=0"
+          :fixed="subSubItem.isFixed"
+          :filters="filterData(subSubItem.filterRender)"
+          :filter-render="{name: subSubItem.filterRender}"
+          :formatter="formatEnum"
+          :cell-render="cellRenderData(subSubItem.cellRender)"
+        >
+        </vxe-table-column>
+      </vxe-colgroup>
+      <vxe-table-column
+        v-else
+        :edit-render="subItem.edit"
+        :key="subIndex"
+        show-overflow
+        :field="subItem.prop"
+        :align="subItem.align"
+        :title="subItem.label"
+        :type="subItem.html ? 'html': ''"
+        :min-width="subItem.width"
+        :sortable="subItem.isSort"
+        :visible="subItem.width!=0"
+        :fixed="subItem.isFixed"
+        :filters="filterData(subItem.filterRender)"
+        :filter-render="{name: subItem.filterRender}"
+        :formatter="formatEnum"
+        :cell-render="cellRenderData(subItem.cellRender)"
+      >
+      </vxe-table-column>
+    </template>
+  </vxe-colgroup>
+  <vxe-table-column
+    v-else
+    :edit-render="item.edit"
+    :key="index"
+    show-overflow
+    :field="item.prop"
+    :align="item.align"
+    :title="item.label"
+    :type="item.html ? 'html': ''"
+    :min-width="item.width"
+    :sortable="item.isSort"
+    :visible="item.width!=0"
+    :fixed="item.isFixed"
+    :filters="filterData(item.filterRender)"
+    :filter-render="{name: item.filterRender}"
+    :formatter="formatEnum"
+    :cell-render="cellRenderData(item.cellRender)"
+  >
+  </vxe-table-column>
+</template>
+
+
+<script>
+export default {
+  name: "tableColumn",
+  data() {
+    return {
+      
+    };
+  },
+  props: {
+    item: Object,
+    filterData: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    cellRenderData: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    formatEnum: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+ 
+  methods: {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>