@lx-frontend/wrap-element-ui 1.0.7-beta.1 → 1.0.7-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.7-beta.1",
+  "version": "1.0.7-beta.2",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

package/src/components/EditableTable/bizHooks/useColumnHeaderOperation.ts

@@ -46,7 +46,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
   watch(
     () => props.columnConfig,
     (val) => {
-      filteredValue.value = val.reduce((prev, curr) => ({ ...prev, [curr.prop]: [] }), {});
+      val?.forEach(v => handleResetFilterValue(v));
       tempFilteredValue.value = { ...filteredValue.value };
     },
     { immediate: true }
@@ -226,6 +226,18 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     }
   }
 
+  function handleResetFilterValue (column: IColumnConfig) {
+    if (column.filters) {
+      if (Array.isArray(column.filters)) {
+        filteredValue.value[column.prop] = []
+      } else if (column.filters.default) {
+        filteredValue.value[column.prop] = column.filters.default
+      } else {
+        filteredValue.value[column.prop] = column.filters.type === 'radio' ? '' : []
+      }
+    }
+  }
+
   const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
     if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
       clearSort();
@@ -234,11 +246,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopover
     // 合计
     summaryList.value = summaryList.value.filter(item => item !== column.prop);
 
-    if (column.filters) {
-      filteredValue.value[column.prop] = Array.isArray(column.filters)
-        ? []
-        : column.filters.default ?? []
-    }
+    handleResetFilterValue(column)
     if (column.search) {
       if (!Array.isArray(column.search)) {
         searchValue.value[column.prop] = '';

package/src/components/EditableTable/features/bizTableHeaderPopover.vue

@@ -125,6 +125,7 @@
             v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
             :key="item.value"
             :label="item.value"
+            :title="item.text"
             class="editable-table-sort-filter__filter-checkbox"
           >
             <slot
@@ -146,6 +147,7 @@
             v-for="item in column.filters.options"
             :key="item.value"
             :label="item.value"
+            :title="item.text"
           >
             <slot
               name="filter-item"

package/src/components/EditableTable/index.less

@@ -387,10 +387,26 @@
     &__sort,
     &__search {
       padding: 14px;
+
+      .el-radio__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: calc(100% + 10px);
+        display: inline-block;
+        vertical-align: middle;
+      }
     }
 
     &__filter {
       padding-top: 0;
+
+      .el-radio-group,
+      .el-checkbox-group {
+        max-height: 166px;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
     }
 
     &__filter-title,
@@ -447,6 +463,7 @@
     }
 
     &__filter-checkbox-group {
+      width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
@@ -456,10 +473,20 @@
     &__filter-checkbox {
       margin-top: 10px;
       font-size: 14px;
+      width: 100%;
 
       &:first-child {
         margin-top: 0;
       }
+
+      .el-checkbox__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: calc(100% - 20px);
+        display: inline-block;
+        vertical-align: middle;
+      }
     }
 
     &__footer {
@@ -496,6 +523,11 @@
       background: @--theme-blue--;
       border-color: @--theme-blue--;
     }
+
+    .el-checkbox__input.is-checked+.el-checkbox__label,
+    .el-radio__input.is-checked+.el-radio__label {
+      color: @--theme-blue--;
+    }
   }
 
   &__pin-top {
@@ -725,4 +757,4 @@
   &::before {
     bottom: -4px;
   }
-}
+}

package/src/components/EditableTable/index.vue

@@ -514,7 +514,7 @@ const {
   tempSortType,
   sortingColumn,
   isColumnFiltering,
-  searchValue,
+  // searchValue,
   inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,

package/src/components/EditableTable/types/index.ts

@@ -12,6 +12,8 @@ type _IColumnConfigRequired = {
   editType?: IEditType; // 编辑格式
   editSlotName?: string; // 编辑时，自定义编辑组件的slotName
   sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  /** 内部使用， */
+  isColumnSortable?: boolean;
   slotName?: string; // 如果要自定义，传入 slotName
   hoverSlotName?: string; // 悬浮时，自定义悬浮组件的slotName
   isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏