列表 多级表头 递归改造

dsk-operate-ui/src/components/TableListCom/components/TableListColumn.vue

+<template>
+  <!-- 多级表头情况 -->
+  <el-table-column v-if="item.children instanceof Array && item.children.length" :label="item.label" :prop="item.prop" :width="item.width"
+    :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
+    :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false" :show-overflow-tooltip="item.showOverflowTooltip">
+    <template v-for="(child,index) of item.children">
+      <table-list-column :key="child.uid ? child.uid : index" :item="child"></table-list-column>
+    </template>
+  </el-table-column>
+  <!-- 复选框列 -->
+  <el-table-column v-else-if="item.type === 'selection'" type="selection" :width="item.width ? item.width : '38px'" :fixed="item.fixed"
+    :align="item.align?item.align:'left'" :show-overflow-tooltip="item.showOverflowTooltip">
+  </el-table-column>
+  <!-- 序号列 -->
+  <el-table-column v-else-if="item.type === 'index'" type="index" :label="item.label ? item.label : '序号'"
+    :width="flexWidth(tableData.length,item.width,hasQueryParams)" :min-width="item.minWidth" :align="item.align?item.align:'left'"
+    :fixed="item.fixed" :resizable="false">
+    <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
+  </el-table-column>
+  <!-- 正常列 -->
+  <el-table-column v-else :label="item.label" :prop="item.prop" :width="item.width" :min-width="item.minWidth" :align="item.align?item.align:'left'"
+    :fixed="item.fixed" :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false"
+    :show-overflow-tooltip="item.showOverflowTooltip">
+    <!-- 自定义表头 -->
+    <template v-if="item.slotHeader" slot="header">
+      <slot :name="item.slotName"></slot>
+    </template>
+    <!-- 非自定义表头 -->
+    <template slot-scope="scope">
+      <!-- 有自定义插槽 -->
+      <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
+      <!-- 操作栏 -->
+      <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
+      <!-- 没有插槽 -->
+      <div v-else>
+        {{ scope.row[item.prop] || '-' }}
+      </div>
+    </template>
+  </el-table-column>
+</template>
+<script>
+export default {
+  name: "TableListColumn",
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    queryParams: {
+      type: Object,
+      default: () => ({})
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    queryParams: {
+      handler(newValue) {
+        const _temp = newValue ? newValue : {};
+        const keys = Object.keys(_temp);
+        if (keys.length) {
+          this.hasQueryParams = true;
+        } else {
+          this.hasQueryParams = false;
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data() {
+    return {
+      hasQueryParams: this.hasQueryParams
+    };
+  },
+  //可访问data属性
+  created() {
+
+  },
+  //计算集
+  computed: {
+
+  },
+  //方法集
+  methods: {
+    flexWidth(len = 0, width = 50, hasQueryParams) {
+      if (hasQueryParams) {
+        let currentMax = this.queryParams.pageNum * this.queryParams.pageSize - this.queryParams.pageSize + len;
+        if (currentMax.toString().length > 3) {
+          width = width + (currentMax.toString().length - 3) * 10;
+        }
+      }
+      return width + 'px';
+    },
+    pagingHandler(hasQueryParams, queryParams, scope) {
+      // 有分页参数
+      if (hasQueryParams) {
+        return queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1;
+      }
+      // 不分页
+      return scope.$index + 1;
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

dsk-operate-ui/src/components/TableListCom/index.vue

@@ -11,43 +11,40 @@
         <el-table-column type="index" v-if="isIndex" label="序号" :width="flexWidth(tableData)" align="left" :fixed="indexFixed" :resizable="false">
           <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
         </el-table-column>
-        <template v-for="(item,index) in formColum">
-          <!-- 自定义表头组件 不恒等false才展示当前列 -->
+        <!-- 列二次封装 -->
+        <template v-for="(item,index) of formColum">
+          <table-list-column v-if="item.use !== false" :key="item.uid ? item.uid : index" :tableData="tableData" :item="item"
+            :queryParams="queryParams" :hasQueryParams="hasQueryParams"></table-list-column>
+        </template>
+
+        <!-- <template v-for="(item,index) in formColum">
           <template v-if="item.use !== false">
-            <!-- 复选框列 -->
             <el-table-column v-if="item.type == 'selection'" type="selection" :key="item.uid ? item.uid : index"
               :width="item.width ? item.width : '38px'" :fixed="item.fixed" :align="item.align?item.align:'left'"
               :show-overflow-tooltip="item.showOverflowTooltip">
             </el-table-column>
-            <!-- 序号列 -->
             <el-table-column v-else-if="item.type == 'index'" type="index" :key="item.uid ? item.uid : index" :label="item.label ? item.label : '序号'"
               :width="flexWidth(tableData,item.width)" :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
               :resizable="false">
               <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
             </el-table-column>
-            <!-- 正常列 -->
             <el-table-column v-else :key="item.uid ? item.uid : index" :label="item.label" :prop="item.prop" :width="item.width"
               :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
               :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false"
               :show-overflow-tooltip="item.showOverflowTooltip">
-              <!-- 自定义表头 -->
               <template v-if="item.slotHeader" slot="header">
                 <slot :name="item.slotName"></slot>
               </template>
-              <!-- 非自定义表头 -->
               <template slot-scope="scope">
-                <!-- 有自定义插槽 -->
                 <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
-                <!-- 操作栏 -->
                 <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
-                <!-- 没有插槽 -->
                 <div v-else>
                   {{ scope.row[item.prop] || '-' }}
                 </div>
               </template>
             </el-table-column>
           </template>
-        </template>
+        </template> -->
         <template slot="empty">
         </template>
       </el-table>
@@ -67,6 +64,7 @@
 
 <script>
 import NoData from '@/components/NoData';
+import TableListColumn from "@/components/TableListCom/components/TableListColumn";
 export default {
   name: "tableListCom",
   props: {
@@ -157,7 +155,8 @@ export default {
     },
   },
   components: {
-    NoData
+    NoData,
+    TableListColumn
   },
   data() {
     return {

dsk-operate-ui/src/views/projectCostLedger/detail/components/FeedSummary/index.vue

@@ -113,7 +113,7 @@ export default {
         { label: '单位', prop: "unit", width: "57", uid: v4() },
         { label: '甲供材料说明', prop: "materialDescription", width: "137", uid: v4() },
         {
-          label: '计划成本', prop: "jhcb", width: "809", align: "center", slot: true, uid: v4(), children: [
+          label: '计划成本', prop: "jhcb", width: "809", align: "center", uid: v4(), children: [
             { label: '指导价格', prop: "guidePrice", width: "81", uid: v4() }
           ]
         },