htui-yllkbz 1.5.16 → 1.5.18

package/src/packages/HtTable/index.vue

@@ -4,132 +4,127 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2023-05-09 10:27:33
+ * @LastEditTime: 2024-08-03 16:22:31
 -->
 <template>
-  <div v-loading="state.loading" style="background:#fff">
+  <div v-loading="state.loading"
+       style="background:#fff">
     <article>
-      <el-table
-        ref="comTable"
-        :height="height"
-        :max-height="maxHeight"
-        :sum-text="sumText"
-        :show-summary="showSummary"
-        :summary-method="summaryMethod"
-        :border="border"
-        :default-expand-all="defaultExpandAll"
-        :expand-row-keys="expandRowKeys"
-        :stripe="stripe !== undefined ? stripe : true"
-        :size="size || 'small'"
-        :fit="fit"
-        :span-method="spanMethodCom"
-        :header-row-style="
+      <el-table ref="comTable"
+                :height="height"
+                :max-height="maxHeight"
+                :sum-text="sumText"
+                :show-summary="showSummary"
+                :summary-method="summaryMethod"
+                :border="border"
+                :default-expand-all="defaultExpandAll"
+                :expand-row-keys="expandRowKeys"
+                :stripe="stripe !== undefined ? stripe : true"
+                :size="size || 'small'"
+                :fit="fit"
+                :span-method="spanMethodCom"
+                :header-row-style="
           headerRowStyle || { background: 'var(--primary-92)' }
         "
-        :header-row-class-name="headerRowClassName"
-        :header-cell-class-name="headerCellClassName"
-        :header-cell-style="headerCellStyle"
-        :show-header="showHeader"
-        :empty-text="emptyText || '暂无数据'"
-        :row-style="rowStyle"
-        :cell-style="cellStyle"
-        :row-class-name="rowClassName"
-        :cell-class-name="cellClassName"
-        :current-row-key="currentRowKey"
-        :highlight-current-row="highlightCurrentRow"
-        :row-key="rowKey || 'id'"
-        :data="data"
-        tooltip-effect="dark"
-        :tree-props="treeProps"
-        @row-click="
+                :header-row-class-name="headerRowClassName"
+                :header-cell-class-name="headerCellClassName"
+                :header-cell-style="headerCellStyle"
+                :show-header="showHeader"
+                :empty-text="emptyText || '暂无数据'"
+                :row-style="rowStyle"
+                :cell-style="cellStyle"
+                :row-class-name="rowClassName"
+                :cell-class-name="cellClassName"
+                :current-row-key="currentRowKey"
+                :highlight-current-row="highlightCurrentRow"
+                :row-key="rowKey || 'id'"
+                :data="data"
+                tooltip-effect="dark"
+                :tree-props="treeProps"
+                @row-click="
           (row, column, event) => $emit('row-click', row, column, event)
         "
-        @row-contextmenu="
+                @row-contextmenu="
           (row, column, event) => $emit('row-contextmenu', row, column, event)
         "
-        @row-dblclick="
+                @row-dblclick="
           (row, column, event) => $emit('row-dblclick', row, column, event)
         "
-        @header-click="(column, event) => $emit('header-click', column, event)"
-        @header-contextmenu="
+                @header-click="(column, event) => $emit('header-click', column, event)"
+                @header-contextmenu="
           (column, event) => $emit('header-contextmenu', column, event)
         "
-        @sort-change="
+                @header-dragend="headerDragend"
+                @sort-change="
           ({ column, prop, order }) =>
             $emit('sort-change', { column, prop, order })
         "
-        @expand-change="(row, da) => $emit('expand-change', row, da)"
-        @filter-change="(filter) => $emit('filter-change', filter)"
-        @current-change="
+                @expand-change="(row, da) => $emit('expand-change', row, da)"
+                @filter-change="(filter) => $emit('filter-change', filter)"
+                @current-change="
           (currentRow, oldCurrentRow) =>
             $emit('current-change', currentRow, oldCurrentRow)
         "
-        @select="(selection, row) => $emit('select', selection, row)"
-        @select-all="(selection) => $emit('select-all', selection)"
-        @selection-change="(selection) => $emit('selection-change', selection)"
-        @cell-mouse-enter="
+                @select="(selection, row) => $emit('select', selection, row)"
+                @select-all="(selection) => $emit('select-all', selection)"
+                @selection-change="(selection) => $emit('selection-change', selection)"
+                @cell-mouse-enter="
           (row, column, cell, event) =>
             $emit('cell-mouse-enter', row, column, cell, event)
         "
-        @cell-mouse-leave="
+                @cell-mouse-leave="
           (row, column, cell, event) =>
             $emit('cell-mouse-leave', row, column, cell, event)
         "
-        @cell-click="
+                @cell-click="
           (row, column, cell, event) =>
             $emit('cell-click', row, column, cell, event)
         "
-        @cell-dblclick="
+                @cell-dblclick="
           (row, column, cell, event) =>
             $emit('cell-dblclick', row, column, cell, event)
-        "
-      >
-        <template slot="empty"> <slot name="empty"> </slot> </template>
-        <el-table-column
-          width="55"
-          :resizable="false"
-          v-if="checked"
-          :reserve-selection="reserveSelection"
-          :selectable="(row) => row[selectKey] !== false"
-          type="selection"
-        >
+        ">
+        <template slot="empty">
+          <slot name="empty"> </slot>
+        </template>
+        <el-table-column width="55"
+                         :resizable="false"
+                         v-if="checked"
+                         :reserve-selection="reserveSelection"
+                         :selectable="(row) => row[selectKey] !== false"
+                         type="selection">
         </el-table-column>
-        <el-table-column v-if="isExpand" type="expand">
+        <el-table-column v-if="isExpand"
+                         type="expand">
           <!-- 展开行专用 -->
           <template slot-scope="props">
-            <slot
-              name="expand"
-              :row="props.row"
-              :column="props.column"
-              :rowIndex="props.$index"
-            >
+            <slot name="expand"
+                  :row="props.row"
+                  :column="props.column"
+                  :rowIndex="props.$index">
             </slot>
           </template>
         </el-table-column>
-        <el-table-column
-          v-if="!hideOrder"
-          :resizable="false"
-          :label="keyName === undefined ? '序号' : keyName"
-          :align="'center'"
-          width="55"
-        >
+        <el-table-column v-if="!hideOrder"
+                         :resizable="false"
+                         :label="keyName === undefined ? '序号' : keyName"
+                         :align="'center'"
+                         width="55">
           <template slot="header">
             <slot :name="'header_order'">
-              <div @click="showFilterModel" v-if="showFilter" title="筛选排序">
-                <el-button type="text"
-                  ><i class="el-icon-s-grid"></i
-                ></el-button>
+              <div @click="showFilterModel"
+                   v-if="showFilter"
+                   title="筛选排序">
+                <el-button type="text"><i class="el-icon-s-grid"></i></el-button>
               </div>
               <span v-else>{{ keyName || '序号' }}</span>
             </slot>
           </template>
           <template slot-scope="{ row, column, $index }">
-            <slot
-              name="body_order"
-              :row="row"
-              :column="column"
-              :$index="$index"
-            >
+            <slot name="body_order"
+                  :row="row"
+                  :column="column"
+                  :$index="$index">
               {{
                 (state.pageInfo.currentPage - 1) * state.pageInfo.pageSize +
                   ($index + 1)
@@ -138,169 +133,147 @@
           </template>
         </el-table-column>
 
-        <template v-for="(item, index) in state.showColumns">
-          <HtTableColumn
-            :key="`${item.key}_${index}`"
-            :item="item"
-            @showFiles="showFiles"
-          >
-            <template
-              v-for="child in allChildren"
-              :slot="child.key"
-              slot-scope="scope"
-            >
-              <slot
-                :name="child.key"
-                :row="scope.row"
-                :column="scope.column"
-                :rowIndex="scope.rowIndex"
-              >
+        <template v-for="(item, index) in showColumns">
+
+          <HtTableColumn :key="`${item.key}_${index}`"
+                         :item="item"
+                         @showFiles="showFiles">
+            <template v-for="child in allChildren"
+                      :slot="child.key"
+                      slot-scope="scope">
+              <slot :name="child.key"
+                    :row="scope.row"
+                    :column="scope.column"
+                    :rowIndex="scope.rowIndex">
               </slot>
             </template>
-            <template
-              v-for="child in allChildren"
-              slot-scope="{ column, $index }"
-              :slot="'header_' + child.key"
-            >
-              <slot
-                :name="'header_' + child.key"
-                :column="column"
-                :$index="$index"
-              ></slot>
+            <template v-for="child in allChildren"
+                      slot-scope="{ column, $index }"
+                      :slot="'header_' + child.key">
+              <slot :name="'header_' + child.key"
+                    :column="column"
+                    :$index="$index"></slot>
             </template>
 
-            <template :slot="item.key" slot-scope="scope">
-              <slot
-                :name="item.key"
-                :row="scope.row"
-                :column="scope.column"
-                :rowIndex="scope.rowIndex"
-              >
+            <template :slot="item.key"
+                      slot-scope="scope">
+
+              <slot :name="item.key"
+                    :row="scope.row"
+                    :column="scope.column"
+                    :rowIndex="scope.rowIndex">
               </slot>
             </template>
-            <template
-              slot-scope="{ column, $index }"
-              :slot="'header_' + item.key"
-            >
-              <slot
-                :name="'header_' + item.key"
-                :column="column"
-                :$index="$index"
-              ></slot>
+            <template slot-scope="{ column, $index }"
+                      :slot="'header_' + item.key">
+              <slot :name="'header_' + item.key"
+                    :column="column"
+                    :$index="$index"></slot>
             </template>
           </HtTableColumn>
         </template>
       </el-table>
     </article>
-    <footer v-if="!hidePage" class="ht-table-footer">
+    <footer v-if="!hidePage"
+            class="ht-table-footer">
       <el-row name="footer">
         <!-- 此处建议使用el-col -->
         <slot name="footerLeft"></slot>
 
         <el-col :span="$slots['footerLeft'] ? 12 : 24">
           <!-- <p style="width:90px;float:left">共{{data.length}}条</p> -->
-          <PageInfo
-            :hide-on-single-page="pagination && pagination.hideOnSinglePage"
-            :small="pagination && pagination.small"
-            :style="pageStyle"
-            @onchange="(e) => $emit('onchange', e)"
-            :page-sizes="pagination && pagination.pageSizes"
-            :page-info="state.pageInfo"
-          ></PageInfo>
+          <PageInfo :hide-on-single-page="pagination && pagination.hideOnSinglePage"
+                    :small="pagination && pagination.small"
+                    :style="pageStyle"
+                    @onchange="(e) => $emit('onchange', e)"
+                    :page-sizes="pagination && pagination.pageSizes"
+                    :page-info="state.pageInfo"></PageInfo>
         </el-col>
       </el-row>
     </footer>
     <!-- 详情弹框 -->
-    <el-dialog
-      :visible.sync="state.visibleFilter"
-      title="属性设置"
-      v-if="state.visibleFilter"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      :close-on-click-modal="true"
-      width="400px"
-    >
-      <p
-        slot="title"
-        style="font-weight:700;font-size:18px;float:left;margin:0"
-      >
+    <el-dialog :visible.sync="state.visibleFilter"
+               title="属性设置"
+               v-if="state.visibleFilter"
+               :append-to-body="true"
+               :modal-append-to-body="true"
+               :close-on-click-modal="true"
+               width="400px">
+      <p slot="title"
+         style="font-weight:700;font-size:18px;float:left;margin:0">
         自定义列展示
       </p>
       <div style="overflow:hidden;height:35vh;margin-top:12px">
         <el-scrollbar style="height: calc(35vh + 17px)">
-          <el-tree
-            :data="getAllColumns"
-            ref="tree"
-            show-checkbox
-            :expand-on-click-node="false"
-            node-key="key"
-            :check-on-click-node="false"
-            @node-drag-start="handleDragStart"
-            @node-drag-enter="handleDragEnter"
-            @node-drag-leave="handleDragLeave"
-            @node-drag-over="handleDragOver"
-            @node-drag-end="handleDragEnd"
-            @node-drop="handleDrop"
-            :default-checked-keys="state.checkedColumnKeys"
-            @check-change="changeColumns"
-            :allow-drag="allowDrag"
-            :draggable="draggable"
-            :allow-drop="allowDrop"
-          >
-            <span class="custom-tree-node" slot-scope="{ node, data }">
-              <slot :name="'header_' + data.key" :column="data"
-                >{{ data.title
+          <el-tree :data="getAllColumns"
+                   ref="tree"
+                   show-checkbox
+                   :expand-on-click-node="false"
+                   node-key="key"
+                   :check-on-click-node="false"
+                   @node-drag-start="handleDragStart"
+                   @node-drag-enter="handleDragEnter"
+                   @node-drag-leave="handleDragLeave"
+                   @node-drag-over="handleDragOver"
+                   @node-drag-end="handleDragEnd"
+                   @node-drop="handleDrop"
+                   :default-checked-keys="state.checkedColumnKeys"
+                   @check-change="changeColumns"
+                   :allow-drag="allowDrag"
+                   :draggable="draggable"
+                   :allow-drop="allowDrop">
+            <span class="custom-tree-node"
+                  slot-scope="{ node, data }">
+              <slot :name="'header_' + data.key"
+                    :column="data">{{ data.title
                 }}<span style="color:#C0C4CC">{{
                   data.property ? `(${data.property})` : ''
-                }}</span></slot
-              >
+                }}</span></slot>
             </span>
           </el-tree>
         </el-scrollbar>
       </div>
       <span slot="footer">
-        <el-button type="primary" @click="confirmSortAndshow">确定</el-button>
+        <el-button type="primary"
+                   @click="confirmSortAndshow">确定</el-button>
         <el-button @click="state.visibleFilter = false">取消</el-button>
         <el-button @click="resetColumn">重置</el-button>
       </span>
     </el-dialog>
     <!-- 附件详情弹框 -->
-    <el-dialog
-      :visible.sync="state.visibleFile"
-      v-if="state.visibleFile"
-      title="附件查看"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      :close-on-click-modal="true"
-      width="400px"
-      :center="true"
-    >
-      <p
-        slot="title"
-        style="font-weight:700;font-size:18px;float:left;margin:0"
-      >
+    <el-dialog :visible.sync="state.visibleFile"
+               v-if="state.visibleFile"
+               title="附件查看"
+               :append-to-body="true"
+               :modal-append-to-body="true"
+               :close-on-click-modal="true"
+               width="400px"
+               :center="true">
+      <p slot="title"
+         style="font-weight:700;font-size:18px;float:left;margin:0">
         附件查看
       </p>
 
       <div style="overflow:hidden;height:calc(30vh)">
         <el-scrollbar style="height: calc(100% + 17px)">
-          <HtUploadFiles :disabled="true" v-model="state.files"></HtUploadFiles>
+          <HtUploadFiles :disabled="true"
+                         v-model="state.files"></HtUploadFiles>
         </el-scrollbar>
       </div>
     </el-dialog>
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { Column, PageInfoType } from '@/packages/type';
-import PageInfo from '@/packages/PageInfo/index.vue';
-import HtUploadFiles from '@/packages/HtUploadFiles/index.vue';
-import HtShowBaseData from '@/packages/HtShowBaseData';
-import HtOrgInfo from '@/packages/HtOrgInfo';
-import HtSelectUnit from '@/packages/HtSelectUnit';
-import HtTableColumn from './htTableColumn.vue';
-import ElmentUI from 'element-ui';
-import { getSpanMethod } from './table-span-method';
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Column, PageInfoType } from "@/packages/type";
+import PageInfo from "@/packages/PageInfo/index.vue";
+import HtUploadFiles from "@/packages/HtUploadFiles/index.vue";
+import HtShowBaseData from "@/packages/HtShowBaseData";
+import HtOrgInfo from "@/packages/HtOrgInfo";
+import HtSelectUnit from "@/packages/HtSelectUnit";
+import HtTableColumn from "./htTableColumn.vue";
+import ElmentUI from "element-ui";
+import { getSpanMethod } from "./table-span-method";
 Vue.use(ElmentUI);
 interface State {
   pageInfo: PageInfoType;
@@ -323,7 +296,7 @@ interface State {
   files?: string;
 }
 @Component({
-  name: 'HtTable',
+  name: "HtTable",
   components: {
     PageInfo,
     HtUploadFiles,
@@ -342,7 +315,7 @@ export default class HtTable extends Vue {
   /** 分页样式自定义 */
   @Prop() pageStyle!: string;
   /** 合计行第一列的文本 */
-  @Prop({ default: '合计' }) sumText!: string;
+  @Prop({ default: "合计" }) sumText!: string;
   @Prop({ default: false }) defaultExpandAll!: boolean;
   @Prop() expandRowKeys!: string[];
   /** 自定义合并方法 */
@@ -373,8 +346,8 @@ export default class HtTable extends Vue {
   @Prop() maxHeight?: string | number;
   @Prop() rowKey?: string;
   @Prop() stripe?: boolean;
-  @Prop() border?: boolean;
-  @Prop() size?: 'medium' | 'small' | 'mini';
+  @Prop({ default: true }) border?: boolean;
+  @Prop() size?: "medium" | "small" | "mini";
   @Prop() fit?: boolean;
   @Prop() showHeader?: boolean;
   @Prop() rowClassName?: any;
@@ -382,7 +355,7 @@ export default class HtTable extends Vue {
   /** 是否启用复选框 */
   @Prop() checked!: boolean;
   /** 设置的禁用字段值--与check同步 */
-  @Prop({ default: 'selectable' }) selectKey?: string;
+  @Prop({ default: "selectable" }) selectKey?: string;
   /**    仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 */
   @Prop() selectable?: any;
   @Prop() currentRowKey?: string | number;
@@ -445,7 +418,7 @@ export default class HtTable extends Vue {
     this.state.visibleFilter = false;
     if (this.uuId) {
       window.localStorage.setItem(
-        'table_' + this.uuId,
+        "table_" + this.uuId,
         JSON.stringify(this.columns || [])
       );
     }
@@ -453,25 +426,35 @@ export default class HtTable extends Vue {
   /** 获取展示的keys值 */
   getShowKeys(data: Column[]) {
     const arr: string[] = [];
-    data.forEach((item) => {
-      if (item.checked) {
-        arr.push(item.key);
-      }
-    });
+    function findKeys(array: Column[]) {
+      array.forEach((item) => {
+        if (item.checked) {
+          arr.push(item.key);
+        }
+        if (item.children?.length) {
+          findKeys(item.children);
+        }
+      });
+    }
+    findKeys(data);
+
     this.state.showColumnKeys = arr;
   }
   /** 初始化columns */
   creatInitColumnKey(columns: Column[]) {
     this.state.allColumns = columns;
-    this.state.showColumns = columns;
-
-    this.state.allColumns.forEach((item) => {
-      item.checked = item.checked === false ? false : true;
-    });
-    this.$nextTick(() => {
-      (this.$refs.comTable as any).doLayout();
-      // el-table加ref="comTable"
-    });
+    /** 如果没有配置默认展示的字段则展示全部字段 */
+    const checkTrueArr = columns.filter((item) => item.checked !== false);
+    if (!checkTrueArr.length) {
+      this.state.allColumns.forEach((item) => {
+        item.checked = true;
+      });
+    } else {
+      this.state.allColumns.forEach((item) => {
+        item.checked = item.checked === false ? false : true;
+      });
+    }
+    this.setTableHeader(this.state.allColumns);
     this.getShowKeys(this.state.allColumns);
   }
   doLayout() {
@@ -481,7 +464,7 @@ export default class HtTable extends Vue {
     });
   }
   /** 展示附件信息 */
-  showFiles(val = '') {
+  showFiles(val = "") {
     this.state.files = val;
     this.state.visibleFile = true;
   }
@@ -519,14 +502,76 @@ export default class HtTable extends Vue {
     // console.log("tree drop: ", dropNode, dropType);
   }
   /** 节点是否被插入 */
-  allowDrop(draggingNode: any, dropNode: any, type: string) {
-    return type !== 'inner';
+  allowDrop(_draggingNode: any, _dropNode: any, type: string) {
+    if (_draggingNode.level === _dropNode.level) {
+      return type === "prev" || type === "next";
+    } else {
+      // 不同级进行处理
+      return false;
+    }
   }
   /** 节点是否允许拖动 */
   allowDrag(draggingNode: any) {
     return !draggingNode.data.disabled;
   }
+  headerDragend(
+    newWidth: number,
+    _oldWidth: number,
+    column: any,
+    _event: MouseEvent
+  ) {
+    const allColumnsStr: string | null = window.localStorage.getItem(
+      "table_" + this.uuId
+    );
+    if (allColumnsStr) {
+      const Columns = JSON.parse(allColumnsStr);
 
+      let currentIndex: {
+        parentIndex: number;
+        currentIndex: number;
+      } = { parentIndex: -1, currentIndex: -1 };
+      function getCIndex(arr: Column[], _parent?: Column, pIndex = -1) {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].key === column.property) {
+            currentIndex = {
+              parentIndex: pIndex,
+              currentIndex: i,
+            };
+            break;
+          } else {
+            getCIndex(arr[i].children || [], arr[i], i);
+          }
+        }
+      }
+      getCIndex(Columns, undefined, undefined);
+      if (currentIndex.parentIndex > -1) {
+        Columns[currentIndex.parentIndex].children[
+          currentIndex.currentIndex
+        ].width = newWidth;
+        this.setTableHeader(Columns);
+      } else if (
+        currentIndex.parentIndex == -1 &&
+        currentIndex.currentIndex > -1
+      ) {
+        Columns[currentIndex.currentIndex].width = newWidth;
+        this.setTableHeader(Columns);
+      }
+    }
+  }
+  /** 缓存table头部信息 */
+  setTableHeader(allColumns: Column[]) {
+    if (this.uuId) {
+      window.localStorage.setItem(
+        "table_" + this.uuId,
+        JSON.stringify(allColumns)
+      );
+    }
+    this.state.showColumns = allColumns;
+
+    this.state.visibleFilter = false;
+    this.state.loading = false;
+    this.doLayout();
+  }
   /** 现在自定义列弹窗 */
   showFilterModel() {
     this.state.visibleFilter = true;
@@ -534,14 +579,8 @@ export default class HtTable extends Vue {
     this.state.allColumns = JSON.parse(JSON.stringify(this.state.showColumns));
   }
   /** 自定义列表时候选中列 */
-  changeColumns(node: any, checked: boolean) {
-    let { checkedColumnKeys } = this.state;
-    if (checked) {
-      checkedColumnKeys.push(node.key);
-    } else {
-      checkedColumnKeys = checkedColumnKeys.filter((item) => item !== node.key);
-    }
-    this.state.checkedColumnKeys = checkedColumnKeys;
+  changeColumns() {
+    this.state.checkedColumnKeys = (this.$refs.tree as any).getCheckedKeys();
   }
   /** 自定义列排序的确定功能 */
   confirmSortAndshow() {
@@ -549,50 +588,46 @@ export default class HtTable extends Vue {
     this.state.showColumns = [];
     this.state.allColumns = this.getAllColumns;
     const { allColumns, checkedColumnKeys } = this.state;
-    //对列表check复制
-    allColumns.forEach(
-      (item) => (item.checked = checkedColumnKeys.includes(item.key))
-    );
+
+    function findChecked(colums: Column[]) {
+      colums.forEach((item) => {
+        item.checked = checkedColumnKeys.includes(item.key);
+        //如果子级不存在直接处理
+        if (!item.children?.length) {
+        } else {
+          findChecked(item.children);
+        }
+      });
+    }
+    findChecked(allColumns);
+
     //将复选框选中行展示到列中 */
     this.state.showColumnKeys = checkedColumnKeys;
     //将列的顺序进行处理已经存储
 
-    if (this.uuId) {
-      window.localStorage.setItem(
-        'table_' + this.uuId,
-        JSON.stringify(allColumns)
-      );
-    }
-    this.state.showColumns = allColumns;
-    this.state.visibleFilter = false;
-    this.state.loading = false;
-    this.$nextTick(() => {
-      (this.$refs.comTable as any).doLayout();
-      // el-table加ref="multipleTable"
-    });
+    this.setTableHeader(allColumns);
 
     /** 自定义列回调 */
-    this.$emit('customColumn', allColumns);
+    this.$emit("customColumn", allColumns);
   }
 
   /** 获取显示出来的table头信息 */
   get showColumns() {
-    const { showColumnKeys, showColumns } = this.state;
-    let obj: any = {};
-    for (const key in showColumnKeys) {
-      obj = { ...obj, [showColumnKeys[key]]: true };
-    }
-    /** 缓存起来下次使用  --todo只做了显示没有做排序缓存 */
-    if (this.uuId) {
-      window.localStorage.setItem(
-        'table_' + this.uuId,
-        JSON.stringify(showColumnKeys)
-      );
-    }
+    const stateColumns: Column[] = JSON.parse(
+      JSON.stringify(this.state.showColumns)
+    );
 
-    const data = showColumns.filter((item) => obj[item.key as string]);
-    return data;
+    stateColumns.forEach((item) => {
+      if (item.children?.length && item.checked == false) {
+        const isChecked = !!item.children.find((item) => item.checked);
+        item.checked = isChecked;
+        item.children = item.children.filter((item) => item.checked !== false);
+      }
+    });
+    console.log("showColumns", stateColumns);
+    return stateColumns;
   }
+
   get allChildren() {
     const { showColumns } = this.state;
     let allchildren: Column[] = [];
@@ -605,7 +640,7 @@ export default class HtTable extends Vue {
   }
 
   /** 监听 */
-  @Watch('pageInfo')
+  @Watch("pageInfo")
   setPageInfo(val?: PageInfoType) {
     if (val) {
       const pageInfo: PageInfoType = val;
@@ -622,7 +657,12 @@ export default class HtTable extends Vue {
 
     return allColumns.filter((item) => !item.hide);
   }
-  @Watch('columns', { immediate: true })
+  @Watch("showColumns")
+  resetShowCOlums() {
+    console.log("重置");
+    this.doLayout();
+  }
+  @Watch("columns", { immediate: true })
   setColumns(columns?: Column[]) {
     if (!columns) {
       return;
@@ -634,7 +674,7 @@ export default class HtTable extends Vue {
       //---showColumnKeys 要改变
       //---排列顺序要改变 todo
       const allColumns: string | null = window.localStorage.getItem(
-        'table_' + this.uuId
+        "table_" + this.uuId
       );
       if (allColumns) {
         this.state.allColumns = JSON.parse(allColumns);