Skip to content

B
basic-vue-admin
提交 711a986c 作者: 方治民
操作

feat: 拆分 Edit 各个 Tab 组件，新增外键字段设置联动

上级 8c5e6c66
正在显示 包含 411 行增加 和 194 行删除
src/views/demo/tools/online/form/components/DatabaseForeignKeyTable.vue 0 → 100644
<script lang="ts" setup>
import type { BasicTableProps, VxeGridInstance } from '/@/components/VxeTable'
import type { DatabaseSchema } from '../data'
import { Alert } from 'ant-design-vue'
import { VxeBasicTable } from '/@/components/VxeTable'
import { getDatabaseForeignKeyColumns } from '../data'
import { debounce } from 'lodash-es'
const props = defineProps({
data: {
type: Array as PropType<DatabaseSchema[]>,
required: true,
default: () => [] as DatabaseSchema[],
},
})
const emits = defineEmits(['change'])
const change = debounce(() => emits('change', unref(databaseForeignKeyTable.value?.data)), 500)
watch(
() => props.data,
(data) => {
databaseForeignKeyTableOptions.data = data
},
)
const id = ref<string>('databaseForeignKeyTable')
const databaseForeignKeyTable = ref<VxeGridInstance>()
const databaseForeignKeyTableOptions = reactive<BasicTableProps>({
id: id.value,
// FIXME: 修复表格高度自适应问题
// height: 'auto',
autoResize: true,
stripe: false,
keepSource: true,
showOverflow: true,
rowConfig: { useKey: true, keyField: 'id' },
columns: getDatabaseForeignKeyColumns(change),
data: props.data,
editConfig: { trigger: 'click', mode: 'cell', showStatus: false, beforeEditMethod: ({ row }) => !row.disabled },
})
</script>
<template>
<Alert message="仅支持以 _id 或 Id 为后缀的字段名允许设置外键" type="info" show-icon />
<VxeBasicTable :ref="id" v-bind="databaseForeignKeyTableOptions" />
</template>
src/views/demo/tools/online/form/components/DatabaseSchemaTable.vue 0 → 100644
<script lang="ts" setup>
import type { ActionItem } from '/@/components/Table'
import type { BasicTableProps, VxeGridInstance } from '/@/components/VxeTable'
import type { DatabaseSchema, TableType } from '../data'
import { TableAction } from '/@/components/Table'
import { VxeBasicTable } from '/@/components/VxeTable'
import { nanoid } from 'nanoid'
import { getDatabaseSchemaColumns } from '../data'
import { useSortable } from '/@/hooks/web/useSortable'
import { debounce } from 'lodash-es'
const props = defineProps({
tableType: {
type: String as PropType<TableType>,
required: true,
},
data: {
type: Array as PropType<DatabaseSchema[]>,
required: true,
default: () => [] as DatabaseSchema[],
},
})
const emits = defineEmits(['change'])
const change = debounce(() => emits('change', unref(databaseSchemaTable.value?.data)), 500)
onMounted(() => {
nextTick(() => {
// 初始化行拖拽
const table = databaseSchemaTable.value
const { initSortable } = useSortable(table?.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
handle: '.drag',
onEnd: async (sortableEvent) => {
const newIndex = sortableEvent.newIndex as number
const oldIndex = sortableEvent.oldIndex as number
const currRow = table.data.splice(oldIndex, 1)[0]
table.data.splice(newIndex, 0, currRow)
databaseSchemaTableOptions.data = [...table.data]
await table?.updateData().finally(change)
},
})
initSortable()
})
})
const id = ref<string>('databaseSchemaTable')
const databaseSchemaTable = ref<VxeGridInstance>()
const databaseSchemaTableOptions = reactive<BasicTableProps>({
id: id.value,
// FIXME: 修复表格高度自适应问题
// height: 'auto',
autoResize: true,
stripe: false,
keepSource: true,
showOverflow: true,
rowConfig: { useKey: true, keyField: 'id' },
checkboxConfig: { checkMethod: ({ row }) => !row.disabled },
columns: getDatabaseSchemaColumns(change),
data: props.data,
editConfig: { trigger: 'click', mode: 'cell', showStatus: false, beforeEditMethod: ({ row }) => !row.disabled },
editRules: {
field: [{ required: true, message: '请输入字段名称' }],
comment: [{ required: true, message: '请输入字段备注' }],
type: [{ required: true, message: '请选择字段类型' }],
},
toolbarConfig: {
buttons: [
{
content: '新增',
buttonRender: {
name: 'AButton',
props: {
type: 'primary',
preIcon: 'mdi:table-row-plus-before',
},
events: {
click: async () => {
const table = databaseSchemaTable.value
const { row } = await table?.insertAt(
{
id: nanoid(),
field: null,
type: null,
comment: null,
len: null,
decimal: null,
pk: false,
empty: false,
transient: true,
},
-1,
)
databaseSchemaTableOptions.data.push(row)
await table?.updateData().finally(change)
await table?.setEditCell(row, 'field')
},
},
},
},
{
content: '删除',
buttonRender: {
name: 'AButton',
props: {
type: 'danger',
preIcon: 'mdi:table-row-remove',
disabled: true,
},
events: {
click: async () => {
const table = databaseSchemaTable.value
const checkedRecords = table?.getCheckboxRecords()
if (!checkedRecords?.length) {
return
}
// 更新数据
databaseSchemaTableOptions.data = databaseSchemaTableOptions.data.filter(
(item) => !checkedRecords?.some((record) => record.id === item.id),
)
await table?.removeCheckboxRow()
await table?.updateData().finally(change)
onDatabaseSchemaCheckboxChange()
},
},
},
},
],
},
})
const onDatabaseSchemaCheckboxChange = () => {
const checkedRecords = databaseSchemaTable.value?.getCheckboxRecords()
databaseSchemaTableOptions.toolbarConfig.buttons[1].buttonRender.props.disabled = !checkedRecords?.length
}
const createDatabaseSchemaTableActions = (record: DatabaseSchema) => {
const actions: ActionItem[] = [
{
icon: 'carbon:arrow-up',
onClick: async () => {
const table = databaseSchemaTable.value
const source = table?.getRowById(record.id)
const oldIndex = table?.getRowIndex(source)
const newIndex = oldIndex - 1 < 0 ? 0 : oldIndex - 1
const currRow = table.data.splice(oldIndex, 1)[0]
table.data.splice(newIndex, 0, currRow)
databaseSchemaTableOptions.data = [...table.data]
await table?.updateData().finally(change)
},
},
{
icon: 'carbon:arrow-down',
onClick: async () => {
const table = databaseSchemaTable.value
const source = table?.getRowById(record.id)
const oldIndex = table?.getRowIndex(source)
const newIndex = oldIndex + 1 > table.data.length - 1 ? table.data.length - 1 : oldIndex + 1
const currRow = table.data.splice(oldIndex, 1)[0]
table.data.splice(newIndex, 0, currRow)
databaseSchemaTableOptions.data = [...table.data]
await table?.updateData().finally(change)
},
},
{
icon: 'carbon:copy',
tooltip: '复制',
onClick: async () => {
const table = databaseSchemaTable.value
const source = table?.getRowById(record.id)
const index = table?.getRowIndex(source)
const { row } = await table?.insertAt({ ...record, id: nanoid() }, source)
databaseSchemaTableOptions.data.splice(index + 1, 0, row)
await table?.updateData().finally(change)
await table?.setEditCell(row, 'field')
},
},
{
icon: 'carbon:trash-can',
tooltip: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: async () => {
const table = databaseSchemaTable.value
// 更新数据
databaseSchemaTableOptions.data = databaseSchemaTableOptions.data.filter(
(item) => record.id !== item.id,
)
await table?.updateData().finally(change)
},
},
},
]
return record.field === 'id' ? [] : actions
}
</script>
<template>
<VxeBasicTable
:ref="id"
v-bind="databaseSchemaTableOptions"
@checkbox-change="onDatabaseSchemaCheckboxChange"
@checkbox-all="onDatabaseSchemaCheckboxChange"
>
<template #action="{ row }">
<TableAction outside :actions="createDatabaseSchemaTableActions(row)" />
</template>
</VxeBasicTable>
</template>
src/views/demo/tools/online/form/data.tsx
...@@ -19,12 +19,12 @@ export const databaseTypeOptions: SelectProps['options'] = [ ...@@ -19,12 +19,12 @@ export const databaseTypeOptions: SelectProps['options'] = [
{ {
label: '常规主表', label: '常规主表',
value: 'MasterGeneral', value: 'MasterGeneral',
disabled: true, disabled: false,
}, },
{ {
label: '常规从表', label: '常规从表',
value: 'SlaveGeneral', value: 'SlaveGeneral',
disabled: true, disabled: false,
}, },
], ],
}, },
...@@ -275,6 +275,7 @@ export interface DatabaseSchema { ...@@ -275,6 +275,7 @@ export interface DatabaseSchema {
type?: FieldType type?: FieldType
len?: number len?: number
decimal?: number decimal?: number
defaultValue?: string
pk?: boolean pk?: boolean
empty?: boolean empty?: boolean
transient?: boolean transient?: boolean
...@@ -287,7 +288,7 @@ export interface DatabaseSchema { ...@@ -287,7 +288,7 @@ export interface DatabaseSchema {
* 获取数据源字段列表 * 获取数据源字段列表
* @returns Column[] * @returns Column[]
*/ */
export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { export function getDatabaseSchemaColumns(change: () => void): VxeGridPropTypes.Columns {
return [ return [
{ {
type: 'html', type: 'html',
...@@ -316,6 +317,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -316,6 +317,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
editRender: { editRender: {
name: 'AInput', name: 'AInput',
placeholder: '请点击输入', placeholder: '请点击输入',
events: {
input: change,
},
}, },
}, },
{ {
...@@ -324,6 +328,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -324,6 +328,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
editRender: { editRender: {
name: 'AInput', name: 'AInput',
placeholder: '请点击输入', placeholder: '请点击输入',
events: {
input: change,
},
}, },
}, },
{ {
...@@ -333,6 +340,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -333,6 +340,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
name: 'ASelect', name: 'ASelect',
placeholder: '请点击选择', placeholder: '请点击选择',
optionGroups: fieldTypeOptions, optionGroups: fieldTypeOptions,
events: {
change,
},
}, },
}, },
{ {
...@@ -340,6 +350,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -340,6 +350,9 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
field: 'len', field: 'len',
editRender: { editRender: {
name: 'AInputNumber', name: 'AInputNumber',
events: {
input: change,
},
}, },
}, },
{ {
...@@ -347,15 +360,35 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -347,15 +360,35 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
field: 'decimal', field: 'decimal',
editRender: { editRender: {
name: 'AInputNumber', name: 'AInputNumber',
events: {
input: change,
},
},
},
{
title: '默认值',
field: 'defaultValue',
editRender: {
name: 'AInput',
events: {
input: change,
},
}, },
}, },
{ {
title: '是否主键', title: '是否主键',
field: 'pk', field: 'pk',
align: 'center', align: 'center',
width: 100,
slots: { slots: {
default: ({ row }) => { default: ({ row }) => {
return [<Checkbox v-model:checked={row.pk} disabled={row.disabled || row.disablePK} />] return [
<Checkbox
v-model:checked={row.pk}
disabled={row.disabled || row.disablePK}
onChange={change}
/>,
]
}, },
}, },
}, },
...@@ -363,9 +396,16 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -363,9 +396,16 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
title: '允许空值', title: '允许空值',
field: 'empty', field: 'empty',
align: 'center', align: 'center',
width: 100,
slots: { slots: {
default: ({ row }) => { default: ({ row }) => {
return [<Checkbox v-model:checked={row.empty} disabled={row.disabled || row.disableEmpty} />] return [
<Checkbox
v-model:checked={row.empty}
disabled={row.disabled || row.disableEmpty}
onChange={change}
/>,
]
}, },
}, },
}, },
...@@ -373,10 +413,15 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -373,10 +413,15 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
title: '是否同步数据库', title: '是否同步数据库',
field: 'transient', field: 'transient',
align: 'center', align: 'center',
width: 150,
slots: { slots: {
default: ({ row }) => { default: ({ row }) => {
return [ return [
<Checkbox v-model:checked={row.transient} disabled={row.disabled || row.disableTransient} />, <Checkbox
v-model:checked={row.transient}
disabled={row.disabled || row.disableTransient}
onChange={change}
/>,
] ]
}, },
}, },
...@@ -391,7 +436,53 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns { ...@@ -391,7 +436,53 @@ export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
] ]
} }
export function getDefaultSchemaFieldDataSourcesByType(type: string): DatabaseSchema[] { export function getDatabaseForeignKeyColumns(change: () => void): VxeGridPropTypes.Columns {
return [
{
type: 'seq',
align: 'center',
width: 50,
},
{
title: '字段名称',
field: 'field',
},
{
title: '字段备注',
field: 'comment',
},
{
title: '字段类型',
field: 'type',
},
{
title: '外键表',
field: 'foreignTable',
editRender: {
// TODO: 改用 Select 选择外键表，通过接口查询
name: 'AInput',
placeholder: '请点击输入',
events: {
input: change,
},
},
},
{
title: '外键字段',
field: 'foreignField',
editRender: {
name: 'AInput',
placeholder: '请点击输入',
events: {
input: change,
},
},
},
]
}
export type TableType = 'SingleGeneral' | 'MasterGeneral' | 'SlaveGeneral' | 'SingleTimeSeries' | 'BusinessTimeSeries'
export function getDefaultSchemaFieldDataSourcesByType(type: TableType): DatabaseSchema[] {
if (type === 'SingleGeneral') { if (type === 'SingleGeneral') {
return [ return [
{ {
......
src/views/demo/tools/online/form/edit.vue
<script lang="ts" setup> <script lang="ts" setup>
import type { ActionItem } from '/@/components/Table'
import type { BasicTableProps, VxeGridInstance } from '/@/components/VxeTable'
import { nanoid } from 'nanoid'
import { TabPane, Tabs } from 'ant-design-vue' import { TabPane, Tabs } from 'ant-design-vue'
import type { DatabaseSchema } from './data' import type { DatabaseSchema, TableType } from './data'
import { databaseTypeOptions, getDatabaseSchemaColumns, getDefaultSchemaFieldDataSourcesByType } from './data' import { databaseTypeOptions, getDefaultSchemaFieldDataSourcesByType } from './data'
import DatabaseSchemaTable from './components/DatabaseSchemaTable.vue'
import DatabaseForeignKeyTable from './components/DatabaseForeignKeyTable.vue'
import { Icon } from '@/components/Icon' import { Icon } from '@/components/Icon'
import { BasicForm, useForm } from '/@/components/Form' import { BasicForm, useForm } from '/@/components/Form'
import { TableAction } from '/@/components/Table'
import { VxeBasicTable } from '/@/components/VxeTable'
import { BasicModal, useModalInner } from '/@/components/Modal' import { BasicModal, useModalInner } from '/@/components/Modal'
import { useSortable } from '/@/hooks/web/useSortable'
const [registerModal] = useModalInner((data) => { const [registerModal] = useModalInner((data) => {
console.log(data) console.log(data)
...@@ -18,24 +14,9 @@ ...@@ -18,24 +14,9 @@
// TODO: // TODO:
// 1. 根据传递的 ID 参数，查询表配置详细信息 // 1. 根据传递的 ID 参数，查询表配置详细信息
// 2. 赋值填充到表单对象中 // 2. 赋值填充到表单对象中
nextTick(() => {
const table = databaseSchemaTable.value
const { initSortable } = useSortable(table?.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
handle: '.drag',
onEnd: (sortableEvent) => {
const newIndex = sortableEvent.newIndex as number
const oldIndex = sortableEvent.oldIndex as number
const currRow = table.data.splice(oldIndex, 1)[0]
table.data.splice(newIndex, 0, currRow)
databaseSchemaTableOptions.data = [...table.data]
},
})
initSortable()
})
}) })
const defaultTableType = databaseTypeOptions[0].options[0].value const tableType = ref<TableType>(databaseTypeOptions[0].options[0].value)
const [registerEditForm] = useForm({ const [registerEditForm] = useForm({
colon: true, colon: true,
labelWidth: 150, labelWidth: 150,
...@@ -49,6 +30,11 @@ ...@@ -49,6 +30,11 @@
colProps: { colProps: {
span: 8, span: 8,
}, },
componentProps: {
onChange(e: { target: { value: string } }) {
model.name = e.target.value
},
},
}, },
{ {
field: 'describe', field: 'describe',
...@@ -58,6 +44,11 @@ ...@@ -58,6 +44,11 @@
colProps: { colProps: {
span: 8, span: 8,
}, },
componentProps: {
onChange(e: { target: { value: string } }) {
model.describe = e.target.value
},
},
}, },
{ {
field: 'type', field: 'type',
...@@ -66,7 +57,10 @@ ...@@ -66,7 +57,10 @@
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: databaseTypeOptions, options: databaseTypeOptions,
defaultValue: defaultTableType, defaultValue: tableType.value,
onChange(value: TableType) {
model.type = value
},
}, },
colProps: { colProps: {
span: 8, span: 8,
...@@ -75,157 +69,34 @@ ...@@ -75,157 +69,34 @@
], ],
}) })
const databaseSchemaTable = ref<VxeGridInstance>() const model = reactive({
const databaseSchemaTableOptions = reactive<BasicTableProps>({ name: '',
id: nanoid(), describe: '',
// FIXME: 修复表格高度自适应问题 type: '',
// height: 'auto', schemas: [] as DatabaseSchema[],
autoResize: true, foreignKeys: [] as DatabaseSchema[],
stripe: false,
keepSource: true,
showOverflow: true,
rowConfig: { useKey: true, keyField: 'id' },
checkboxConfig: { checkMethod: ({ row }) => !row.disabled },
columns: getDatabaseSchemaColumns(),
data: getDefaultSchemaFieldDataSourcesByType(defaultTableType),
editConfig: { trigger: 'click', mode: 'cell', showStatus: false, beforeEditMethod: ({ row }) => !row.disabled },
editRules: {
field: [{ required: true, message: '请输入字段名称' }],
type: [{ required: true, message: '请选择字段类型' }],
},
toolbarConfig: {
buttons: [
{
content: '新增',
buttonRender: {
name: 'AButton',
props: {
type: 'primary',
preIcon: 'mdi:table-row-plus-before',
},
events: {
click: async () => {
const table = databaseSchemaTable.value
const { row } = await table?.insertAt(
{
id: nanoid(),
field: null,
type: null,
comment: null,
len: null,
decimal: null,
pk: false,
empty: false,
transient: true,
},
-1,
)
databaseSchemaTableOptions.data.push(row)
await table?.updateData()
await table?.setEditCell(row, 'field')
},
},
},
},
{
content: '删除',
buttonRender: {
name: 'AButton',
props: {
type: 'danger',
preIcon: 'mdi:table-row-remove',
disabled: true,
},
events: {
click: async () => {
const table = databaseSchemaTable.value
const checkedRecords = table?.getCheckboxRecords()
if (!checkedRecords?.length) {
return
}
// 更新数据
databaseSchemaTableOptions.data = databaseSchemaTableOptions.data.filter(
(item) => !checkedRecords?.some((record) => record.id === item.id),
)
await table?.removeCheckboxRow()
await table?.updateData()
onDatabaseSchemaCheckboxChange()
},
},
},
},
],
},
}) })
const onDatabaseSchemaCheckboxChange = () => { const databaseSchemaTableData = computed(() => {
const checkedRecords = databaseSchemaTable.value?.getCheckboxRecords() return getDefaultSchemaFieldDataSourcesByType(tableType.value)
databaseSchemaTableOptions.toolbarConfig.buttons[1].buttonRender.props.disabled = !checkedRecords?.length })
const databaseSchemaTableDataChange = (data: DatabaseSchema[]) => {
model.schemas = toRaw(data)
console.log(model.schemas)
} }
const createDatabaseSchemaTableActions = (record: DatabaseSchema) => { const databaseForeignKeyTableData = computed(() => {
const actions: ActionItem[] = [ return model.schemas.filter((item) => {
{ console.log(
icon: 'carbon:arrow-up', item,
onClick: async () => { item.field && item.field !== 'id' && (item.field.endsWith('_id') || item.field.endsWith('Id')),
const table = databaseSchemaTable.value )
const source = table?.getRowById(record.id) return item.field && item.field !== 'id' && (item.field.endsWith('_id') || item.field.endsWith('Id'))
const oldIndex = table?.getRowIndex(source) })
const newIndex = oldIndex - 1 < 0 ? 0 : oldIndex - 1 })
const currRow = table.data.splice(oldIndex, 1)[0] const databaseForeignKeyTableDataChange = (data: DatabaseSchema[]) => {
table.data.splice(newIndex, 0, currRow) console.log(toRaw(data))
databaseSchemaTableOptions.data = [...table.data] model.foreignKeys = toRaw(data)
await table?.updateData()
},
},
{
icon: 'carbon:arrow-down',
onClick: async () => {
const table = databaseSchemaTable.value
const source = table?.getRowById(record.id)
const oldIndex = table?.getRowIndex(source)
const newIndex = oldIndex + 1 > table.data.length - 1 ? table.data.length - 1 : oldIndex + 1
const currRow = table.data.splice(oldIndex, 1)[0]
table.data.splice(newIndex, 0, currRow)
databaseSchemaTableOptions.data = [...table.data]
await table?.updateData()
},
},
{
icon: 'carbon:copy',
tooltip: '复制',
onClick: async () => {
const table = databaseSchemaTable.value
const source = table?.getRowById(record.id)
const index = table?.getRowIndex(source)
const { row } = await table?.insertAt({ ...record, id: nanoid() }, source)
databaseSchemaTableOptions.data.splice(index + 1, 0, row)
await table?.updateData()
await table?.setEditCell(row, 'field')
},
},
{
icon: 'carbon:trash-can',
tooltip: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
confirm: async () => {
const table = databaseSchemaTable.value
// 更新数据
databaseSchemaTableOptions.data = databaseSchemaTableOptions.data.filter(
(item) => record.id !== item.id,
)
await table?.updateData()
},
},
},
]
return record.field === 'id' ? [] : actions
} }
</script> </script>
...@@ -241,18 +112,11 @@ ...@@ -241,18 +112,11 @@
<Icon icon="carbon:schematics" /> <Icon icon="carbon:schematics" />
数据表属性 数据表属性
</template> </template>
<!-- --> <DatabaseSchemaTable
:tableType="tableType"
<VxeBasicTable :data="databaseSchemaTableData"
ref="databaseSchemaTable" @change="databaseSchemaTableDataChange"
v-bind="databaseSchemaTableOptions" />
@checkbox-change="onDatabaseSchemaCheckboxChange"
@checkbox-all="onDatabaseSchemaCheckboxChange"
>
<template #action="{ row }">
<TableAction outside :actions="createDatabaseSchemaTableActions(row)" />
</template>
</VxeBasicTable>
</TabPane> </TabPane>
<TabPane key="db-foreign-key"> <TabPane key="db-foreign-key">
...@@ -260,9 +124,10 @@ ...@@ -260,9 +124,10 @@
<Icon icon="mdi:foreign-key" /> <Icon icon="mdi:foreign-key" />
外键 外键
</template> </template>
<!-- --> <DatabaseForeignKeyTable
:data="databaseForeignKeyTableData"
外键 @change="databaseForeignKeyTableDataChange"
/>
</TabPane> </TabPane>
<TabPane key="db-index"> <TabPane key="db-index">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论