diff --git a/examples/views/modal/Modal.vue b/examples/views/modal/Modal.vue
index 5b65ff91b..266324952 100644
--- a/examples/views/modal/Modal.vue
+++ b/examples/views/modal/Modal.vue
@@ -176,7 +176,7 @@
-
+
{
assemColumn($xetable, refElem.value, column, colgroup)
diff --git a/packages/table/src/columnInfo.ts b/packages/table/src/columnInfo.ts
index 53cc36fdf..82dc306e8 100644
--- a/packages/table/src/columnInfo.ts
+++ b/packages/table/src/columnInfo.ts
@@ -144,7 +144,7 @@ export class ColumnInfo {
}
update (name: string, value: any) {
- // 不支持双向的属性
+ // 不支持直接修改的属性
if (name !== 'filters') {
if (name === 'field') {
// 兼容旧属性
diff --git a/packages/table/src/group.ts b/packages/table/src/group.ts
index 657aedaa3..f8616ba26 100644
--- a/packages/table/src/group.ts
+++ b/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)
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index d312ca222..da385b3dd 100644
--- a/packages/table/src/table.ts
+++ b/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())
diff --git a/packages/table/src/util.ts b/packages/table/src/util.ts
index 656ddd3e1..e3c1e55f7 100644
--- a/packages/table/src/util.ts
+++ b/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()
+ }
+ }
})
})
}
diff --git a/styles/cssvar.scss b/styles/cssvar.scss
index 8ed74d28c..b78a10628 100644
--- a/styles/cssvar.scss
+++ b/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};
diff --git a/styles/variable.scss b/styles/variable.scss
index 39fd1ad85..dacb04a1e 100644
--- a/styles/variable.scss
+++ b/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;
diff --git a/types/table.d.ts b/types/table.d.ts
index e65b31394..73727d840 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -735,6 +735,8 @@ export interface TablePrivateMethods {
checkSelectionStatus(): void
handleSelectRow(params: any, value: any, isForce?: boolean): void
handleCustom(): Promise
+ handleUpdateDataQueue(): void
+ handleRefreshColumnQueue(): void
preventEvent(evnt: any, type: any, args?: any, next?: any, end?: any): any
triggerHeaderHelpEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams): void
triggerHeaderTooltipEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams): void
@@ -841,6 +843,10 @@ export interface TableReactData {
mergeList: VxeTableDefines.MergeItem[]
// 合并表尾数据的对象集
mergeFooterList: VxeTableDefines.MergeItem[]
+ // 刷新列标识,当列筛选被改变时,触发表格刷新数据
+ upDataFlag: number
+ // 刷新列标识,当列的特定属性被改变时,触发表格刷新列
+ reColumnFlag: number
// 初始化标识
initStore: {
filter: boolean
diff --git a/types/tooltip.d.ts b/types/tooltip.d.ts
index 2bb031c58..561f214d8 100644
--- a/types/tooltip.d.ts
+++ b/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