96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ContentWrap } from '@/components/ContentWrap'
|
||
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
||
|
|
import { Table } from '@/components/Table'
|
||
|
|
import { getTableListApi } from '@/api/table'
|
||
|
|
import { TableData } from '@/api/table/types'
|
||
|
|
import { ref, h } from 'vue'
|
||
|
|
import { ElTag, ElButton } from 'element-plus'
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
const columns: TableColumn[] = [
|
||
|
|
{
|
||
|
|
field: 'index',
|
||
|
|
label: t('tableDemo.index'),
|
||
|
|
type: 'index'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'title',
|
||
|
|
label: t('tableDemo.title')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'author',
|
||
|
|
label: t('tableDemo.author')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'display_time',
|
||
|
|
label: t('tableDemo.displayTime')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'importance',
|
||
|
|
label: t('tableDemo.importance'),
|
||
|
|
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
|
||
|
|
return h(
|
||
|
|
ElTag,
|
||
|
|
{
|
||
|
|
type: cellValue === 1 ? 'success' : cellValue === 1 ? 'warning' : 'danger'
|
||
|
|
},
|
||
|
|
() =>
|
||
|
|
cellValue === 1
|
||
|
|
? t('tableDemo.important')
|
||
|
|
: cellValue === 1
|
||
|
|
? t('tableDemo.good')
|
||
|
|
: t('tableDemo.commonly')
|
||
|
|
)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'pageviews',
|
||
|
|
label: t('tableDemo.pageviews')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'action',
|
||
|
|
label: t('tableDemo.action')
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const loading = ref(true)
|
||
|
|
|
||
|
|
let tableDataList = ref<TableData[]>([])
|
||
|
|
|
||
|
|
const getTableList = async () => {
|
||
|
|
const res = await getTableListApi({
|
||
|
|
params: {
|
||
|
|
pageIndex: 1,
|
||
|
|
pageSize: 20
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
.finally(() => {
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
if (res) {
|
||
|
|
tableDataList.value = res.data.list
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getTableList()
|
||
|
|
|
||
|
|
const acitonFn = (data: TableColumnDefault) => {
|
||
|
|
console.log(data)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ContentWrap :title="t('tableDemo.table')" :message="t('tableDemo.tableDes')">
|
||
|
|
<Table :columns="columns" :data="tableDataList" :loading="loading">
|
||
|
|
<template #action="data">
|
||
|
|
<ElButton @click="acitonFn(data as TableColumnDefault)">{{
|
||
|
|
t('tableDemo.action')
|
||
|
|
}}</ElButton>
|
||
|
|
</template>
|
||
|
|
</Table>
|
||
|
|
</ContentWrap>
|
||
|
|
</template>
|