feat: 🎸 Table组件重构完成并给出相应示例
This commit is contained in:
chenkl
@@ -10,8 +10,8 @@ interface PropsData {
|
||||
}
|
||||
|
||||
const methods: EmptyObjFun = {
|
||||
getList: function({ params }: PropsData): AxiosPromise {
|
||||
return fetch({ url: '/getJoke', method: 'get', params })
|
||||
getExampleList: function({ params }: PropsData): AxiosPromise {
|
||||
return fetch({ url: '/example/list', method: 'get', params })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Message } from '_c/Message'
|
||||
|
||||
import qs from 'qs'
|
||||
|
||||
@@ -19,6 +19,7 @@ const service: AxiosInstance = axios.create({
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
console.log(config)
|
||||
if (config.method === 'post' && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
|
||||
config.data = qs.stringify(config.data)
|
||||
}
|
||||
@@ -37,12 +38,12 @@ service.interceptors.response.use(
|
||||
if (response.data.code === result_code) {
|
||||
return response.data
|
||||
} else {
|
||||
ElMessage.error(response.data.message)
|
||||
Message.error(response.data.message)
|
||||
}
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log('err' + error) // for debug
|
||||
ElMessage.error(error.message)
|
||||
Message.error(error.message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
@@ -29,7 +29,7 @@ import { setupGlobCom } from '@/components' // 全局公用组件
|
||||
|
||||
import { setupDirectives } from '@/directives' // 自定义指令
|
||||
|
||||
// import { mockXHR } from '../../../mock'
|
||||
import { mockXHR } from '../../../mock'
|
||||
|
||||
import '@/styles/reset.css' // 重置不同浏览器之间的标签默认样式
|
||||
|
||||
@@ -49,7 +49,7 @@ setupGlobCom(app) // 注册全局公用组件
|
||||
|
||||
setupDirectives(app) // 注册全局自定义指令
|
||||
|
||||
// mockXHR() // mock注册
|
||||
mockXHR() // mock注册
|
||||
|
||||
router.isReady().then(() => {
|
||||
app.mount('#app')
|
||||
|
||||
@@ -123,6 +123,22 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||
title: '图片预览'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'button',
|
||||
component: () => import('_p/index/views/components-demo/button/index.vue'),
|
||||
name: 'ButtonDemo',
|
||||
meta: {
|
||||
title: '按钮'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'message',
|
||||
component: () => import('_p/index/views/components-demo/message/index.vue'),
|
||||
name: 'MessageDemo',
|
||||
meta: {
|
||||
title: '消息提示'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'count-to',
|
||||
component: () => import('_p/index/views/components-demo/count-to/index.vue'),
|
||||
@@ -184,6 +200,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||
title: '基础表格'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'page-table',
|
||||
component: () => import('_p/index/views/table-demo/page-table/index.vue'),
|
||||
name: 'PageTable',
|
||||
meta: {
|
||||
title: '分页表格'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'stripe-table',
|
||||
component: () => import('_p/index/views/table-demo/stripe-table/index.vue'),
|
||||
@@ -312,6 +336,22 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||
title: '表尾合计行'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'merge-table',
|
||||
component: () => import('_p/index/views/table-demo/merge-table/index.vue'),
|
||||
name: 'MergeTable',
|
||||
meta: {
|
||||
title: '合并行或列'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'custom-index',
|
||||
component: () => import('_p/index/views/table-demo/custom-index/index.vue'),
|
||||
name: 'CustomIndex',
|
||||
meta: {
|
||||
title: '自定义索引'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -440,26 +480,26 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/example-demo',
|
||||
// component: Layout,
|
||||
// name: 'ExampleDemo',
|
||||
// meta: {
|
||||
// alwaysShow: true,
|
||||
// icon: 'example',
|
||||
// title: '综合实例'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'example',
|
||||
// component: () => import('_p/index/views/example-demo/example/index.vue'),
|
||||
// name: 'Example',
|
||||
// meta: {
|
||||
// title: '列表综合实例'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
{
|
||||
path: '/example-demo',
|
||||
component: Layout,
|
||||
name: 'ExampleDemo',
|
||||
meta: {
|
||||
alwaysShow: true,
|
||||
icon: 'example',
|
||||
title: '综合实例'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'example',
|
||||
component: () => import('_p/index/views/example-demo/example/index.vue'),
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: '列表综合实例'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@@ -28,7 +28,7 @@ class App extends VuexModule implements AppState {
|
||||
// public fixedTags = true // 是否固定标签栏
|
||||
// public fixedNavbar = true // 是否固定navbar
|
||||
public fixedHeader = true // 是否固定header
|
||||
public layout = 'Classic' // layout布局
|
||||
public layout = 'Top' // layout布局
|
||||
public showBreadcrumb = true // 是否显示面包屑
|
||||
public showHamburger = true // 是否显示侧边栏缩收按钮
|
||||
public showScreenfull = true // 是否全屏按钮
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert message="扩展 antdv 的 Button 组件，实现 primary、success、warning、info、default 等主题样式。" style="margin-bottom: 20px;" />
|
||||
<div class="btn__wrap">default</div>
|
||||
<div class="btn__item">
|
||||
<el-alert
|
||||
effect="dark"
|
||||
:closable="false"
|
||||
title="对 Element 的 Button 组件进行美化，实现水波纹样式，如不需要，可在 src/styles/button.less 进行更改注释。"
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
|
||||
<el-row style="margin-bottom: 20px;">
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button shape="round">默认按钮</el-button>
|
||||
<el-button loading>默认按钮</el-button>
|
||||
<el-button disabled>默认按钮</el-button>
|
||||
</div>
|
||||
<div class="btn__wrap">primary</div>
|
||||
<div class="btn__item">
|
||||
<el-button type="primary">主要按钮</el-button>
|
||||
<el-button type="primary" shape="round">主要按钮</el-button>
|
||||
<el-button type="primary" loading>主要按钮</el-button>
|
||||
<el-button type="primary" disabled>主要按钮</el-button>
|
||||
</div>
|
||||
<div class="btn__wrap">success</div>
|
||||
<div class="btn__item">
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="success" shape="round">成功按钮</el-button>
|
||||
<el-button type="success" loading>成功按钮</el-button>
|
||||
<el-button type="success" disabled>成功按钮</el-button>
|
||||
</div>
|
||||
<div class="btn__wrap">warning</div>
|
||||
<div class="btn__item">
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="warning" shape="round">警告按钮</el-button>
|
||||
<el-button type="warning" loading>警告按钮</el-button>
|
||||
<el-button type="warning" disabled>警告按钮</el-button>
|
||||
</div>
|
||||
<div class="btn__wrap">danger</div>
|
||||
<div class="btn__item">
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
<el-button type="danger" shape="round">危险按钮</el-button>
|
||||
<el-button type="danger" loading>危险按钮</el-button>
|
||||
<el-button type="danger" disabled>危险按钮</el-button>
|
||||
</div>
|
||||
<div class="btn__wrap">info</div>
|
||||
<div class="btn__item">
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
<el-button type="info" shape="round">信息按钮</el-button>
|
||||
<el-button type="info" loading>信息按钮</el-button>
|
||||
<el-button type="info" disabled>信息按钮</el-button>
|
||||
</div>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-bottom: 20px;">
|
||||
<el-button plain>朴素按钮</el-button>
|
||||
<el-button type="primary" plain>主要按钮</el-button>
|
||||
<el-button type="success" plain>成功按钮</el-button>
|
||||
<el-button type="info" plain>信息按钮</el-button>
|
||||
<el-button type="warning" plain>警告按钮</el-button>
|
||||
<el-button type="danger" plain>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-bottom: 20px;">
|
||||
<el-button round>圆角按钮</el-button>
|
||||
<el-button type="primary" round>主要按钮</el-button>
|
||||
<el-button type="success" round>成功按钮</el-button>
|
||||
<el-button type="info" round>信息按钮</el-button>
|
||||
<el-button type="warning" round>警告按钮</el-button>
|
||||
<el-button type="danger" round>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-bottom: 20px;">
|
||||
<el-button icon="el-icon-search" circle />
|
||||
<el-button type="primary" icon="el-icon-edit" circle />
|
||||
<el-button type="success" icon="el-icon-check" circle />
|
||||
<el-button type="info" icon="el-icon-message" circle />
|
||||
<el-button type="warning" icon="el-icon-star-off" circle />
|
||||
<el-button type="danger" icon="el-icon-delete" circle />
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,11 +53,5 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.btn__wrap {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn__item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
<style>
|
||||
</style>
|
||||
|
||||
34
src/pages/index/views/components-demo/message/index.vue
Normal file
34
src/pages/index/views/components-demo/message/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert
|
||||
effect="dark"
|
||||
:closable="false"
|
||||
title="二次封装 Element 的 Message 组件，每次只显示最新一条消息，避免出现太多消息提示导致不美观。"
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<el-button @click="show">显示</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { Message } from '_c/Message'
|
||||
export default defineComponent({
|
||||
name: 'MessageDemo',
|
||||
setup() {
|
||||
const count = ref<number>(0)
|
||||
function show() {
|
||||
count.value = count.value + 1
|
||||
Message.success('这是成功消息' + count.value)
|
||||
}
|
||||
return {
|
||||
count,
|
||||
show
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -49,7 +49,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { createImgPreview } from '_c/Preview/functional'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Message } from '_c/Message'
|
||||
export default defineComponent({
|
||||
// name: 'PreviewDemo',
|
||||
setup() {
|
||||
@@ -83,10 +83,10 @@ export default defineComponent({
|
||||
show: true,
|
||||
index: 0,
|
||||
onSelect: (i: number) => {
|
||||
ElMessage.info('当前点击的图片索引：' + i)
|
||||
Message.info('当前点击的图片索引：' + i)
|
||||
},
|
||||
onClose: (i: number) => {
|
||||
ElMessage.info('关闭之后的图片索引：' + i)
|
||||
Message.info('关闭之后的图片索引：' + i)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -40,17 +40,17 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Message } from '_c/Message'
|
||||
export default defineComponent({
|
||||
// name: 'Clipboard'
|
||||
setup() {
|
||||
const inputVal1 = ref<string>('')
|
||||
const inputVal2 = ref<string>('')
|
||||
function clipboardSuccess(val: any) {
|
||||
ElMessage.success('我是自定义成功回调：' + val.text)
|
||||
Message.success('我是自定义成功回调：' + val.text)
|
||||
}
|
||||
function clipboardError() {
|
||||
ElMessage.error('我是自定义失败回调')
|
||||
Message.error('我是自定义失败回调')
|
||||
}
|
||||
return {
|
||||
inputVal1, inputVal2,
|
||||
|
||||
@@ -1,9 +1,98 @@
|
||||
<template />
|
||||
<template>
|
||||
<div>
|
||||
<com-table
|
||||
v-loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:pagination="{
|
||||
currentPage: defalutParams.pageIndex,
|
||||
total: total,
|
||||
onSizeChange: handleSizeChange,
|
||||
onCurrentChange: handleCurrentChange
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import ComTable from '_c/Table/index.vue'
|
||||
import Search from '_c/Search/index.vue'
|
||||
import { useExample } from '@/hooks/useExample'
|
||||
|
||||
import api from '_p/index/api'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'title',
|
||||
label: '标题',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
key: 'author',
|
||||
label: '作者'
|
||||
},
|
||||
{
|
||||
key: 'display_time',
|
||||
label: '创建时间'
|
||||
},
|
||||
{
|
||||
key: 'importance',
|
||||
label: '重要性'
|
||||
},
|
||||
{
|
||||
key: 'pageviews',
|
||||
label: '阅读数'
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'Example',
|
||||
components: {
|
||||
ComTable,
|
||||
Search
|
||||
},
|
||||
setup() {
|
||||
const { defalutParams, tableData, loading, total, currentChange, sizeChange } = useExample()
|
||||
|
||||
async function getExampleList() {
|
||||
try {
|
||||
const res = await api.example.getExampleList({
|
||||
params: defalutParams
|
||||
})
|
||||
if (res) {
|
||||
total.value = res.data.total
|
||||
tableData.value = res.data.list
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
// 该方法重置了一些默认参数
|
||||
sizeChange(val)
|
||||
getExampleList()
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
// 该方法重置了一些默认参数
|
||||
currentChange(val)
|
||||
getExampleList()
|
||||
}
|
||||
|
||||
getExampleList()
|
||||
|
||||
return {
|
||||
columns,
|
||||
defalutParams,
|
||||
loading,
|
||||
tableData,
|
||||
total,
|
||||
handleSizeChange,
|
||||
handleCurrentChange
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<el-button type="primary" @click="setWatermark('vue-antdv-admin')">创建水印</el-button>
|
||||
<el-button type="primary" @click="setWatermark('vue-element-plus-admin')">创建水印</el-button>
|
||||
<el-button type="danger" @click="clear">清除水印</el-button>
|
||||
<el-button type="warning" @click="setWatermark('vue-antdv-admin-new')">重置水印</el-button>
|
||||
<el-button type="warning" @click="setWatermark('vue-element-plus-admin-new')">重置水印</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -59,7 +59,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
return {
|
||||
columns,
|
||||
tableData,
|
||||
|
||||
@@ -64,7 +64,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
return {
|
||||
columns,
|
||||
tableData,
|
||||
|
||||
@@ -85,7 +85,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
const search = ref<string>('')
|
||||
|
||||
|
||||
85
src/pages/index/views/table-demo/custom-index/index.vue
Normal file
85
src/pages/index/views/table-demo/custom-index/index.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert
|
||||
effect="dark"
|
||||
:closable="false"
|
||||
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 自定义索引"
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<com-table
|
||||
v-loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import ComTable from '_c/Table/index.vue'
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'CustomIndex',
|
||||
components: {
|
||||
ComTable
|
||||
},
|
||||
setup() {
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
key: 'index',
|
||||
type: 'index',
|
||||
index: (index: number) => {
|
||||
return index * 2
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'date',
|
||||
label: '日期'
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '姓名'
|
||||
},
|
||||
{
|
||||
key: 'address',
|
||||
label: '地址'
|
||||
}
|
||||
])
|
||||
|
||||
return {
|
||||
columns,
|
||||
tableData,
|
||||
loading
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -113,7 +113,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
return {
|
||||
columns,
|
||||
|
||||
@@ -146,7 +146,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function handleClick(row: any) {
|
||||
console.log(row)
|
||||
|
||||
@@ -113,7 +113,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function handleClick(row: any) {
|
||||
console.log(row)
|
||||
|
||||
@@ -83,7 +83,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
return {
|
||||
columns,
|
||||
|
||||
@@ -144,7 +144,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function deleteRow(index: number) {
|
||||
tableData.value.splice(index, 1)
|
||||
|
||||
164
src/pages/index/views/table-demo/merge-table/index.vue
Normal file
164
src/pages/index/views/table-demo/merge-table/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert
|
||||
effect="dark"
|
||||
:closable="false"
|
||||
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 合并行或列"
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<com-table
|
||||
v-loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:span-method="arraySpanMethod"
|
||||
border
|
||||
/>
|
||||
|
||||
<com-table
|
||||
v-loading="loading"
|
||||
:columns="columns1"
|
||||
:data="tableData"
|
||||
:span-method="objectSpanMethod"
|
||||
border
|
||||
style="margin-top: 20px;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import ComTable from '_c/Table/index.vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'id',
|
||||
label: 'ID'
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '姓名'
|
||||
},
|
||||
{
|
||||
key: 'amount1',
|
||||
label: '数值1',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'amount2',
|
||||
label: '数值2',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'amount3',
|
||||
label: '数值4',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
|
||||
const columns1 = [
|
||||
{
|
||||
key: 'id',
|
||||
label: 'ID'
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '姓名'
|
||||
},
|
||||
{
|
||||
key: 'amount1',
|
||||
label: '数值1（元）'
|
||||
},
|
||||
{
|
||||
key: 'amount2',
|
||||
label: '数值2（元）'
|
||||
},
|
||||
{
|
||||
key: 'amount3',
|
||||
label: '数值4（元）'
|
||||
}
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
}, {
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
}, {
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
}, {
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
}, {
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'MergeTable',
|
||||
components: {
|
||||
ComTable
|
||||
},
|
||||
setup() {
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
|
||||
function arraySpanMethod({ rowIndex, columnIndex }: any) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 2]
|
||||
} else if (columnIndex === 1) {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function objectSpanMethod({ rowIndex, columnIndex }: any) {
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
columns, columns1,
|
||||
tableData,
|
||||
loading,
|
||||
arraySpanMethod, objectSpanMethod
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -142,7 +142,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function deleteRow(index: number) {
|
||||
tableData.value.splice(index, 1)
|
||||
|
||||
@@ -71,7 +71,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
const multipleTable = ref<HTMLElement | null>(null)
|
||||
function toggleSelection(rows: any[]) {
|
||||
|
||||
93
src/pages/index/views/table-demo/page-table/index.vue
Normal file
93
src/pages/index/views/table-demo/page-table/index.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-alert
|
||||
effect="dark"
|
||||
:closable="false"
|
||||
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 分页表格"
|
||||
type="info"
|
||||
style="margin-bottom: 20px;"
|
||||
/>
|
||||
<com-table
|
||||
v-loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:pagination="{
|
||||
currentPage: 1,
|
||||
total: 400,
|
||||
onSizeChange: handleSizeChange,
|
||||
onCurrentChange: handleCurrentChange
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import ComTable from '_c/Table/index.vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'date',
|
||||
label: '日期'
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '姓名'
|
||||
},
|
||||
{
|
||||
key: 'address',
|
||||
label: '地址'
|
||||
}
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'PageTable',
|
||||
components: {
|
||||
ComTable
|
||||
},
|
||||
setup() {
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
tableData,
|
||||
loading,
|
||||
handleSizeChange, handleCurrentChange
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -66,7 +66,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
|
||||
@@ -71,7 +71,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
const singleTable = ref<HTMLElement | null>(null)
|
||||
function setCurrent(row: any) {
|
||||
|
||||
@@ -67,7 +67,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
return {
|
||||
columns,
|
||||
|
||||
@@ -64,7 +64,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function tableRowClassName({ rowIndex }: any) {
|
||||
if (rowIndex === 1) {
|
||||
|
||||
@@ -64,7 +64,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
return {
|
||||
columns,
|
||||
tableData,
|
||||
|
||||
@@ -124,7 +124,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function getSummaries(param: any) {
|
||||
const { columns, data } = param
|
||||
|
||||
@@ -145,7 +145,7 @@ export default defineComponent({
|
||||
const loading = ref<boolean>(true)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 2000)
|
||||
}, 1000)
|
||||
|
||||
function load(tree: any, treeNode: any, resolve: Function) {
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user