fix: 修复generateVueTable函数响应式问题,统一columns参数传递方式
This commit is contained in:
@@ -12,7 +12,7 @@ interface ExtendedDataTableProps<T> extends DataTableProps<T> {
|
|||||||
getSubRows?: (row: T) => T[]
|
getSubRows?: (row: T) => T[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export function generateVueTable<T>(props: ExtendedDataTableProps<T>, columns: DataTableProps<T>['columns']) {
|
export function generateVueTable<T>(props: ExtendedDataTableProps<T>) {
|
||||||
const sorting = ref<SortingState>([])
|
const sorting = ref<SortingState>([])
|
||||||
const columnFilters = ref<ColumnFiltersState>([])
|
const columnFilters = ref<ColumnFiltersState>([])
|
||||||
const columnVisibility = ref<VisibilityState>({})
|
const columnVisibility = ref<VisibilityState>({})
|
||||||
@@ -50,7 +50,7 @@ export function generateVueTable<T>(props: ExtendedDataTableProps<T>, columns: D
|
|||||||
|
|
||||||
const tableConfig: TableOptionsWithReactiveData<T> = {
|
const tableConfig: TableOptionsWithReactiveData<T> = {
|
||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get columns() { return columns },
|
get columns() { return props.columns },
|
||||||
state: {
|
state: {
|
||||||
get sorting() { return sorting.value },
|
get sorting() { return sorting.value },
|
||||||
get columnFilters() { return columnFilters.value },
|
get columnFilters() { return columnFilters.value },
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ const table = generateVueTable<AgentApp>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
'select': '选择',
|
'select': '选择',
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ const table = generateVueTable<Agent>({
|
|||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
getSubRows: props.viewMode === 'tree' ? (row: Agent) => row.children || [] : undefined,
|
getSubRows: props.viewMode === 'tree' ? (row: Agent) => row.children || [] : undefined,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.agents.select',
|
select: 'admin.agents.select',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<Announcement>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.announcements.select',
|
select: 'admin.announcements.select',
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ const table = generateVueTable<App>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.applications.select',
|
select: 'admin.applications.select',
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const table = generateVueTable<CardType>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.cardTypes.select',
|
select: 'admin.cardTypes.select',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<Card>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.cards.select',
|
select: 'admin.cards.select',
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const table = generateVueTable<CloudConstant>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.cloudConstants.select',
|
select: 'admin.cloudConstants.select',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<CloudVariable>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.cloudVariables.select',
|
select: 'admin.cloudVariables.select',
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const table = generateVueTable<Device>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
'select': 'admin.devices.select',
|
'select': 'admin.devices.select',
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ const table = generateVueTable<DynamicCode>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.cloudFunction.select',
|
select: 'admin.cloudFunction.select',
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const table = generateVueTable<EmailConfig>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: '选择',
|
select: '选择',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<APIKey>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.extension.apiKeys.select',
|
select: 'admin.extension.apiKeys.select',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<Webhook>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.extension.webhooks.select',
|
select: 'admin.extension.webhooks.select',
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ const table = generateVueTable<Log>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
'select': 'admin.logs.select',
|
'select': 'admin.logs.select',
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ const table = generateVueTable<PaymentChannel>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: '选择',
|
select: '选择',
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const columns = computed(() => [
|
|||||||
}),
|
}),
|
||||||
])
|
])
|
||||||
|
|
||||||
const table = generateVueTable<RiskRule>({ ...props, columns: columns.value }, columns.value)
|
const table = generateVueTable<RiskRule>({ ...props, columns: columns.value })
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: '选择',
|
select: '选择',
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ const columns = computed<ColumnDef<Session>[]>(() => getColumns({
|
|||||||
onForceOffline: props.onForceOffline,
|
onForceOffline: props.onForceOffline,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const table = generateVueTable<Session>({ ...props, columns: columns.value }, columns.value)
|
const table = generateVueTable<Session>({ ...props, columns: columns.value })
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
instance_id: '实例标识',
|
instance_id: '实例标识',
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const table = generateVueTable<SmsConfig>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: '选择',
|
select: '选择',
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const table = generateVueTable<StorageConfig>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: '选择',
|
select: '选择',
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ const table = generateVueTable<Ticket>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.tickets.select',
|
select: 'admin.tickets.select',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<User>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
'select': 'admin.users.select',
|
'select': 'admin.users.select',
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const table = generateVueTable<Version>({
|
|||||||
get data() { return props.data },
|
get data() { return props.data },
|
||||||
get loading() { return props.loading },
|
get loading() { return props.loading },
|
||||||
columns: columns.value,
|
columns: columns.value,
|
||||||
}, columns.value)
|
})
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
const columnLabels: Record<string, string> = {
|
||||||
select: 'admin.versions.select',
|
select: 'admin.versions.select',
|
||||||
|
|||||||
Reference in New Issue
Block a user