支持修改固定列、筛选条件后自动刷新

examples/views/modal/Modal.vue

@@ -176,7 +176,7 @@
       </vxe-modal>
 
       <vxe-button content="阻止关闭" @click="demo1.value10 = true"></vxe-button>
-      <vxe-modal v-model="demo1.value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod" show-zoom resize>
+      <vxe-modal v-model="demo1.value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod" e show-zoom resize>
         <template #default>
           <vxe-table
             border

packages/filter/src/hook.ts

@@ -206,8 +206,8 @@ const tableFilterHook: VxeGlobalHooksHandles.HookOptions = {
        */
       setFilter (fieldOrColumn, options) {
         const column = handleFieldOrColumn($xetable, fieldOrColumn)
-        if (column && column.filters && options) {
-          column.filters = toFilters(options)
+        if (column && column.filters) {
+          column.filters = toFilters(options || [])
         }
         return nextTick()
       },

packages/table/src/column.ts

@@ -97,7 +97,7 @@ export default defineComponent({
 
     provide('$xegrid', null)
 
-    watchColumn(props, column)
+    watchColumn($xetable, props, column)
 
     onMounted(() => {
       assemColumn($xetable, refElem.value, column, colgroup)

packages/table/src/columnInfo.ts

@@ -144,7 +144,7 @@ export class ColumnInfo {
   }
 
   update (name: string, value: any) {
-    // 不支持双向的属性
+    // 不支持直接修改的属性
     if (name !== 'filters') {
       if (name === 'field') {
         // 兼容旧属性

packages/table/src/group.ts

@@ -26,7 +26,7 @@ export default defineComponent({
     provide('xecolgroup', xecolumn)
     provide('$xegrid', null)
 
-    watchColumn(props, column)
+    watchColumn($xetable, props, column)
 
     onMounted(() => {
       assemColumn($xetable, refElem.value, column, colgroup)

packages/table/src/table.ts

@@ -103,6 +103,10 @@ export default defineComponent({
       mergeList: [],
       // 合并表尾数据的对象集
       mergeFooterList: [],
+      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+      upDataFlag: 0,
+      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+      reColumnFlag: 0,
       // 初始化标识
       initStore: {
         filter: false,
@@ -4955,6 +4959,12 @@ export default defineComponent({
         tablePrivateMethods.analyColumnWidth()
         return tableMethods.refreshColumn()
       },
+      handleUpdateDataQueue () {
+        reactData.upDataFlag++
+      },
+      handleRefreshColumnQueue () {
+        reactData.reColumnFlag++
+      },
       preventEvent (evnt, type, args, next, end) {
         const evntList = VXETable.interceptor.get(type)
         let rest
@@ -5871,6 +5881,18 @@ export default defineComponent({
       tablePrivateMethods.analyColumnWidth()
     })
 
+    watch(() => reactData.upDataFlag, () => {
+      nextTick(() => {
+        tableMethods.updateData()
+      })
+    })
+
+    watch(() => reactData.reColumnFlag, () => {
+      nextTick(() => {
+        tableMethods.refreshColumn()
+      })
+    })
+
     watch(() => props.showHeader, () => {
       nextTick(() => {
         tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())

packages/table/src/util.ts

@@ -210,10 +210,18 @@ export function createColumn ($xetable: VxeTableConstructor & VxeTablePrivateMet
   return isColumnInfo(options) ? options : reactive(new ColumnInfo($xetable, options, renderOptions))
 }
 
-export function watchColumn (props: any, column: ColumnInfo) {
+export function watchColumn ($xetable: VxeTableConstructor & VxeTablePrivateMethods, props: any, column: ColumnInfo) {
   Object.keys(props).forEach(name => {
     watch(() => props[name], (value: any) => {
       column.update(name, value)
+      if ($xetable) {
+        if (name === 'filters') {
+          $xetable.setFilter(column as any, value)
+          $xetable.handleUpdateDataQueue()
+        } else if (['visible', 'fixed', 'width', 'minWidth', 'maxWidth'].includes(name)) {
+          $xetable.handleRefreshColumnQueue()
+        }
+      }
     })
   })
 }

styles/cssvar.scss

@@ -191,6 +191,7 @@
 
   /*button*/
   --vxe-button-max-width: #{$vxe-button-max-width};
+  --vxe-button-default-background-color: #{$vxe-button-default-background-color};
   --vxe-button-dropdown-panel-background-color: #{$vxe-button-dropdown-panel-background-color};
   --vxe-button-height-default: #{$vxe-button-height-default};
   --vxe-button-height-medium: #{$vxe-button-height-medium};

styles/variable.scss

@@ -188,7 +188,8 @@ $vxe-radio-button-default-background-color: #fff !default;
 
 /*button*/
 $vxe-button-max-width: 500px !default;
-$vxe-button-dropdown-panel-background-color: #fff !default;
+$vxe-button-default-background-color: #fff !default;
+$vxe-button-dropdown-panel-background-color: $vxe-button-default-background-color !default;
 $vxe-button-height-default: 34px !default;
 $vxe-button-height-medium: 32px !default;
 $vxe-button-height-small: 30px !default;

types/table.d.ts

@@ -735,6 +735,8 @@ export interface TablePrivateMethods<D = VxeTableDataRow> {
   checkSelectionStatus(): void
   handleSelectRow(params: any, value: any, isForce?: boolean): void
   handleCustom(): Promise<void>
+  handleUpdateDataQueue(): void
+  handleRefreshColumnQueue(): void
   preventEvent(evnt: any, type: any, args?: any, next?: any, end?: any): any
   triggerHeaderHelpEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams<any>): void
   triggerHeaderTooltipEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams<any>): void
@@ -841,6 +843,10 @@ export interface TableReactData<D = VxeTableDataRow> {
   mergeList: VxeTableDefines.MergeItem<D>[]
   // 合并表尾数据的对象集
   mergeFooterList: VxeTableDefines.MergeItem<D>[]
+  // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+  upDataFlag: number
+  // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+  reColumnFlag: number
   // 初始化标识
   initStore: {
     filter: boolean

types/tooltip.d.ts

@@ -46,7 +46,7 @@ export interface TooltipReactData {
 export namespace VxeTooltipPropTypes {
   export type Size = SizeType
   export type ModelValue = boolean
-  export type Trigger = 'hover' | 'click' | '' | null
+  export type Trigger = 'hover' | 'click' | 'manual' | '' | null
   export type Theme = string
   export type Content = string | number
   export type UseHTML = boolean