wip: Table component developing
kailong321200875
4 years ago
parent
9b4b317817
commit
7b7fcfef59
@ -0,0 +1,65 @@
|
|||||||
|
import { config } from '@/config/axios/config'
|
||||||
|
import { MockMethod } from 'vite-plugin-mock'
|
||||||
|
import { toAnyString } from '@/utils'
|
||||||
|
import Mock from 'mockjs'
|
||||||
|
|
||||||
|
const { result_code } = config
|
||||||
|
|
||||||
|
const timeout = 1000
|
||||||
|
|
||||||
|
const count = 100
|
||||||
|
|
||||||
|
const baseContent =
|
||||||
|
'<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
|
||||||
|
|
||||||
|
const List: {
|
||||||
|
id: string
|
||||||
|
author: string
|
||||||
|
title: string
|
||||||
|
content: string
|
||||||
|
importance: number
|
||||||
|
display_time: string
|
||||||
|
pageviews: number
|
||||||
|
}[] = []
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
List.push(
|
||||||
|
Mock.mock({
|
||||||
|
id: toAnyString(),
|
||||||
|
// timestamp: +Mock.Random.date('T'),
|
||||||
|
author: '@first',
|
||||||
|
title: '@title(5, 10)',
|
||||||
|
content: baseContent,
|
||||||
|
importance: '@integer(1, 3)',
|
||||||
|
display_time: '@datetime',
|
||||||
|
pageviews: '@integer(300, 5000)'
|
||||||
|
// image_uri
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default [
|
||||||
|
// 登录接口
|
||||||
|
{
|
||||||
|
url: '/example/list',
|
||||||
|
method: 'get',
|
||||||
|
timeout,
|
||||||
|
response: ({ query }) => {
|
||||||
|
const { title, pageIndex, pageSize } = query
|
||||||
|
const mockList = List.filter((item) => {
|
||||||
|
if (title && item.title.indexOf(title) < 0) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
const pageList = mockList.filter(
|
||||||
|
(_, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
|
||||||
|
)
|
||||||
|
return {
|
||||||
|
code: result_code,
|
||||||
|
data: {
|
||||||
|
total: mockList.length,
|
||||||
|
list: pageList
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
] as MockMethod[]
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,11 @@
|
|||||||
|
import { useAxios } from '@/hooks/web/useAxios'
|
||||||
|
import type { TableData } from './types'
|
||||||
|
|
||||||
|
const { request } = useAxios()
|
||||||
|
|
||||||
|
export const getTableListApi = ({ params }: AxiosConfig) => {
|
||||||
|
return request<{
|
||||||
|
total: number
|
||||||
|
list: TableData[]
|
||||||
|
}>({ url: '/example/list', method: 'get', params })
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
export type TableData = {
|
||||||
|
id: string
|
||||||
|
author: string
|
||||||
|
title: string
|
||||||
|
content: string
|
||||||
|
importance: number
|
||||||
|
display_time: string
|
||||||
|
pageviews: number
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import Table from './src/Table.vue'
|
||||||
|
|
||||||
|
export { Table }
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export const setIndex = () => {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
<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>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
declare type TableColumn = {
|
||||||
|
field: string
|
||||||
|
label?: string
|
||||||
|
} & Recordable
|
||||||
|
|
||||||
|
declare type TableColumnDefault = {
|
||||||
|
row: Recordable
|
||||||
|
field: string
|
||||||
|
index: number
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue