wip: Table component developing
陈凯龙
4 years ago
parent
7ef216c87e
commit
b271e13227
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,7 @@
|
||||
import Table from './src/Table.vue'
|
||||
|
||||
export interface TableExpose {
|
||||
setProps: (props: Recordable) => void
|
||||
}
|
||||
|
||||
export { Table }
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
export const setIndex = () => {
|
||||
return 1
|
||||
export const setIndex = (reserveIndex: boolean, index: number, size: number, current: number) => {
|
||||
const newIndex = index + 1
|
||||
if (reserveIndex) {
|
||||
return size * (current - 1) + newIndex
|
||||
} else {
|
||||
return newIndex
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,116 @@
|
||||
import { Table, TableExpose } from '@/components/Table'
|
||||
import { ElTable } from 'element-plus'
|
||||
import { ref, reactive, watch, computed, unref, nextTick } from 'vue'
|
||||
import { AxiosPromise } from 'axios'
|
||||
import { get, assign } from 'lodash-es'
|
||||
import type { TableProps } from '@/components/Table/src/types'
|
||||
|
||||
interface UseTableConfig<T, L> {
|
||||
getListApi: (option: L) => AxiosPromise<T>
|
||||
// 返回数据格式配置
|
||||
response: {
|
||||
list: string
|
||||
total?: string
|
||||
}
|
||||
}
|
||||
|
||||
interface TableObject<K, L> {
|
||||
pageSize: number
|
||||
currentPage: number
|
||||
total: number
|
||||
tableList: K[]
|
||||
parmasObj: L
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
|
||||
config?: UseTableConfig<T, L>
|
||||
) => {
|
||||
const tableObject = reactive<TableObject<K, L>>({
|
||||
// 页数
|
||||
pageSize: 10,
|
||||
// 当前页
|
||||
currentPage: 1,
|
||||
// 总条数
|
||||
total: 10,
|
||||
// 表格数据
|
||||
tableList: [],
|
||||
// AxiosConfig 配置
|
||||
parmasObj: {} as L,
|
||||
// 加载中
|
||||
loading: true
|
||||
})
|
||||
|
||||
const parmasObj = computed(() => {
|
||||
return assign(
|
||||
{
|
||||
params: {
|
||||
pageSize: tableObject.pageSize,
|
||||
pageIndex: tableObject.currentPage
|
||||
}
|
||||
},
|
||||
tableObject.parmasObj
|
||||
)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => tableObject.currentPage,
|
||||
() => {
|
||||
methods.getList()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => tableObject.pageSize,
|
||||
() => {
|
||||
tableObject.currentPage = 1
|
||||
methods.getList()
|
||||
}
|
||||
)
|
||||
|
||||
// Table实例
|
||||
const tableRef = ref<typeof Table & TableExpose>()
|
||||
|
||||
// ElTable实例
|
||||
const elTableRef = ref<ComponentRef<typeof ElTable>>()
|
||||
|
||||
const register = (ref: typeof Table & TableExpose, elRef: ComponentRef<typeof ElTable>) => {
|
||||
tableRef.value = ref
|
||||
elTableRef.value = elRef
|
||||
}
|
||||
|
||||
const getTable = async () => {
|
||||
await nextTick()
|
||||
const table = unref(tableRef)
|
||||
if (!table) {
|
||||
console.error('The table is not registered. Please use the register method to register')
|
||||
}
|
||||
return table
|
||||
}
|
||||
|
||||
const methods = {
|
||||
getList: async () => {
|
||||
tableObject.loading = true
|
||||
const res = await config
|
||||
?.getListApi(unref(parmasObj) as L)
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
tableObject.loading = false
|
||||
})
|
||||
if (res) {
|
||||
tableObject.tableList = get(res.data || {}, config?.response.list as string)
|
||||
tableObject.total = get(res.data || {}, config?.response?.total as string) || 0
|
||||
}
|
||||
},
|
||||
setProps: async (props: TableProps = {}) => {
|
||||
const table = await getTable()
|
||||
table?.setProps(props)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
register,
|
||||
tableObject,
|
||||
methods
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
<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'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
|
||||
const { register, tableObject, methods } = useTable<
|
||||
{
|
||||
total: number
|
||||
list: TableData[]
|
||||
},
|
||||
TableData
|
||||
>({
|
||||
getListApi: getTableListApi,
|
||||
response: {
|
||||
list: 'list',
|
||||
total: 'total'
|
||||
}
|
||||
})
|
||||
|
||||
const { getList } = methods
|
||||
|
||||
getList()
|
||||
|
||||
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 === 2 ? 'warning' : 'danger'
|
||||
},
|
||||
() =>
|
||||
cellValue === 1
|
||||
? t('tableDemo.important')
|
||||
: cellValue === 2
|
||||
? t('tableDemo.good')
|
||||
: t('tableDemo.commonly')
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'pageviews',
|
||||
label: t('tableDemo.pageviews')
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
label: t('tableDemo.action')
|
||||
}
|
||||
]
|
||||
|
||||
const acitonFn = (data: TableSlotDefault) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const paginationObj = ref<Pagination>()
|
||||
|
||||
const showPagination = (show: boolean) => {
|
||||
if (show) {
|
||||
paginationObj.value = {
|
||||
total: tableObject.total
|
||||
}
|
||||
} else {
|
||||
paginationObj.value = undefined
|
||||
}
|
||||
}
|
||||
|
||||
const reserveIndex = (custom: boolean) => {
|
||||
const { setProps } = methods
|
||||
setProps({
|
||||
reserveIndex: custom
|
||||
})
|
||||
}
|
||||
|
||||
const showSelections = (show: boolean) => {
|
||||
const { setProps } = methods
|
||||
setProps({
|
||||
selection: show
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="`UseTable ${t('tableDemo.operate')}`">
|
||||
<ElButton @click="showPagination(true)">
|
||||
{{ t('tableDemo.show') }} {{ t('tableDemo.pagination') }}
|
||||
</ElButton>
|
||||
<ElButton @click="showPagination(false)">
|
||||
{{ t('tableDemo.hidden') }} {{ t('tableDemo.pagination') }}
|
||||
</ElButton>
|
||||
|
||||
<ElButton @click="reserveIndex(true)">{{ t('tableDemo.reserveIndex') }}</ElButton>
|
||||
<ElButton @click="reserveIndex(false)">{{ t('tableDemo.restoreIndex') }}</ElButton>
|
||||
|
||||
<ElButton @click="showSelections(true)">{{ t('tableDemo.showSelections') }}</ElButton>
|
||||
<ElButton @click="showSelections(false)">{{ t('tableDemo.hiddenSelections') }}</ElButton>
|
||||
|
||||
<ElButton @click="showSelections(true)">{{ t('tableDemo.showExpandedRows') }}</ElButton>
|
||||
<ElButton @click="showSelections(false)">{{ t('tableDemo.hiddenExpandedRows') }}</ElButton>
|
||||
</ContentWrap>
|
||||
<ContentWrap :title="`UseTable ${t('tableDemo.example')}`">
|
||||
<Table
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
:columns="columns"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="paginationObj"
|
||||
@register="register"
|
||||
>
|
||||
<template #action="data">
|
||||
<ElButton type="primary" @click="acitonFn(data as TableSlotDefault)">
|
||||
{{ t('tableDemo.action') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
Loading…
Reference in New Issue