vk-unicloud-admin框架的万能表格组件完整使用指南。Use when working with vk-data-table component for: (1) Creating data tables with JSON configuration, (2) Implementing CRUD operations with table, (3) Using table with cloud functions (vk.baseDao.getTableData), (4) Configuring table columns, buttons, pagination, sorting, filtering, (5) Implementing table events, methods, and slots, (6) Using table query component (vk-data-table-query) for search functionality.
vk-data-table是vk-unicloud-admin框架的核心表格组件，通过JSON配置实现数据展示、查询、排序、分页、CRUD操作等功能。支持静态数据和动态数据（云函数/HTTP请求），配合vk.baseDao.getTableData可实现高性能的数据查询。
<template>
<vk-data-table :data="table1.data" :columns="table1.columns"></vk-data-table>
</template>
<script>
export default {
data() {
return {
table1: {
data: [],
columns: [
{ key: "_id", title: "ID", type: "text", width: 200 },
{ key: "username", title: "用户名", type: "text", width: 150 },
{ key: "nickname", title: "昵称", type: "text", width: 150 },
{ key: "mobile", title: "手机号", type: "text", width: 150 }
]
}
};
}
};
</script>
<template>
<vk-data-table
ref="table1"
action="admin/user/sys/getList"
:columns="table1.columns"
:query-form-param="queryForm1"
:pagination="true"
:page-size="20"
></vk-data-table>
</template>
<script>
export default {
data() {
return {
table1: {
columns: [
{ key: "username", title: "用户名", type: "text", width: 150 },
{ key: "nickname", title: "昵称", type: "text", width: 150 },
{ key: "_add_time", title: "添加时间", type: "time", width: 160 }
]
},
queryForm1: {
formData: {},
columns: []
}
};
}
};
</script>
columns是表格的核心配置，定义每个字段的显示规则：