90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<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'
|
|
|
|
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',
|
|
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>
|