You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
2 years ago
|
<script setup lang="tsx">
|
||
|
|
import { ContentWrap } from '@/components/ContentWrap'
|
||
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
||
|
|
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
|
||
|
|
import { getTreeTableListApi } from '@/api/table'
|
||
|
|
import { reactive, unref } from 'vue'
|
||
|
|
import { ElTag, ElButton } from 'element-plus'
|
||
|
|
import { useTable } from '@/hooks/web/useTable'
|
||
|
|
|
||
|
|
const { tableRegister, tableState } = useTable({
|
||
|
|
fetchDataApi: async () => {
|
||
|
|
const { currentPage, pageSize } = tableState
|
||
|
|
const res = await getTreeTableListApi({
|
||
|
|
pageIndex: unref(currentPage),
|
||
|
|
pageSize: unref(pageSize)
|
||
|
|
})
|
||
|
|
return {
|
||
|
|
list: res.data.list,
|
||
|
|
total: res.data.total
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const { loading, dataList, total, currentPage, pageSize } = tableState
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
const columns = reactive<TableColumn[]>([
|
||
|
|
{
|
||
|
|
field: 'selection',
|
||
|
|
type: 'selection'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'index',
|
||
|
|
label: t('tableDemo.index'),
|
||
|
|
type: 'index'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'content',
|
||
|
|
label: t('tableDemo.header'),
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
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 (
|
||
|
|
<ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
|
||
|
|
{cellValue === 1
|
||
|
|
? t('tableDemo.important')
|
||
|
|
: cellValue === 2
|
||
|
|
? t('tableDemo.good')
|
||
|
|
: t('tableDemo.commonly')}
|
||
|
|
</ElTag>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'pageviews',
|
||
|
|
label: t('tableDemo.pageviews')
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'action',
|
||
|
|
label: t('tableDemo.action'),
|
||
|
|
slots: {
|
||
|
|
default: (data) => {
|
||
|
|
return (
|
||
|
|
<ElButton type="primary" onClick={() => actionFn(data)}>
|
||
|
|
{t('tableDemo.action')}
|
||
|
|
</ElButton>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
const actionFn = (data: TableSlotDefault) => {
|
||
|
|
console.log(data)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ContentWrap :title="`TreeTable ${t('tableDemo.example')}`">
|
||
|
|
<Table
|
||
|
|
v-model:pageSize="pageSize"
|
||
|
|
v-model:currentPage="currentPage"
|
||
|
|
:columns="columns"
|
||
|
|
:data="dataList"
|
||
|
|
row-key="id"
|
||
|
|
:loading="loading"
|
||
|
|
:pagination="{
|
||
|
|
total: total
|
||
|
|
}"
|
||
|
|
@register="tableRegister"
|
||
|
|
/>
|
||
|
|
</ContentWrap>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.el-button {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
</style>
|