feat: Add example-page demo
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { getTableDetApi } from '@/api/table'
|
||||
import { PropType, watch, ref, reactive } from 'vue'
|
||||
import { PropType, reactive } from 'vue'
|
||||
import type { TableData } from '@/api/table/types'
|
||||
import { Descriptions } from '@/components/Descriptions'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
@@ -8,42 +7,13 @@ import { ElTag } from 'element-plus'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
currentRow: {
|
||||
type: Object as PropType<Nullable<TableData>>,
|
||||
default: () => null
|
||||
}
|
||||
})
|
||||
|
||||
const currentRow = ref<Nullable<TableData>>(null)
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const getTableDet = async () => {
|
||||
loading.value = true
|
||||
const res = await getTableDetApi({
|
||||
params: {
|
||||
id: props.currentRow?.id as string
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
if (res) {
|
||||
currentRow.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.currentRow,
|
||||
() => {
|
||||
getTableDet()
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const schema = reactive<DescriptionsSchema[]>([
|
||||
{
|
||||
field: 'title',
|
||||
@@ -75,7 +45,7 @@ const schema = reactive<DescriptionsSchema[]>([
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Descriptions v-loading="loading" :schema="schema" :data="currentRow || {}">
|
||||
<Descriptions :schema="schema" :data="currentRow || {}">
|
||||
<template #importance="{ row }: { row: TableData }">
|
||||
<ElTag :type="row.importance === 1 ? 'success' : row.importance === 2 ? 'warning' : 'danger'">
|
||||
{{
|
||||
|
||||
Reference in New Issue
Block a user