kvuseTable 表格 #
TIP
表格带有分页，如果设置total大于10，会显示分页，如果只有一页数据，分页不显示
基础使用 #
vue
<template>
<k-table :table-data="tableData" :table-column="tableColumn" />
</template>
<script setup>
import { ref } from 'vue';
const tableColumn = [
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' },
];
const tableData = ref([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]);
</script>
使用分页 #
如果设置total值，数值大于size值（默认10），显示分页
Total 50
- 1
- 2
- 3
- 4
- 5
vue
<template>
<k-table
:table-data="tableData" :table-column="tableColumn"
v-model="currentPage" :total="total" @current-change="currentChange"
/>
</template>
<script setup>
import { ref } from 'vue';
const tableColumn = [
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' },
];
const tableData = ref([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]);
const total = ref(50);
const currentPage = ref(1);
const currentChange = (val) => {
console.log('current page: ', val);
};
</script>
使用排序 #
如果table-column中属性设置sortable为true，可设置排序，可使用sort-change方法，进行排序操作
vue
<template>
<k-table
:table-data="tableData" :table-column="tableColumn"
@sort-change="sortChange"
/>
</template>
<script setup>
import { ref } from 'vue';
const tableColumn = [
{ label: '日期', prop: 'date', sortable: true },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' },
];
const tableData = ref([
{
id: 1,
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-03',
name: 'luke',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 4,
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]);
const sortChange = ({
prop, order, sortType, currentPage, column, sortColumn,
}) => {
console.log('prop, order, sortType, currentPage, column, sortColumn: ', prop, order, sortType, currentPage, column, sortColumn);
tableData.value = sortType
? tableData.value.sort((a, b) => b.id - a.id)
: tableData.value.sort((a, b) => a.id - b.id);
};
</script>
使用插槽 #
vue
<template>
<k-table :table-data="tableData" :table-column="tableColumn">
<template #dateHeader>
<el-tag>自定义表头</el-tag>
</template>
<template #set="{ row, index }">
<k-button @click="clickHandle(row, index)">
操作
</k-button>
</template>
</k-table>
</template>
<script setup>
import { ref } from 'vue';
const tableColumn = [
{ label: '日期', prop: 'date', header: 'dateHeader' },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' },
{ label: '操作', custom: 'set' },
];
const tableData = ref([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]);
const clickHandle = (row, index) => {
console.log('row,index: ', row, index);
};
</script>