[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6J70W6BFPPSPZXY38DVECRW":3,"skill-same:01M6J70W6BFPPSPZXY38DVECRW":96},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M6J70W6BFPPSPZXY38DVECRW","vk-data-table",null,"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.","caobingsheng\u002Fskills","caobingsheng","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F18641728?v=4","01M6J6H1N0RR38WEA1KVM9V4GB","01M6J6H1SB287CPJQARKE9FXS0",1,"MIT","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000004","电子表格","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"vk data table","data","table","vk","methods","slots","cloud functions","for","implementing","with","sorting","query","component","functions","use","operations","filtering","crud","json","search","2026-11-10 10:12:30",false,"---\nname: vk-data-table\ndescription: \"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.\"\n---\n\n# vk-data-table 万能表格组件\n\n## Overview\n\nvk-data-table是vk-unicloud-admin框架的核心表格组件，通过JSON配置实现数据展示、查询、排序、分页、CRUD操作等功能。支持静态数据和动态数据（云函数\u002FHTTP请求），配合vk.baseDao.getTableData可实现高性能的数据查询。\n\n## Quick Start\n\n### 基础用法（静态数据）\n\n```vue\n\u003Ctemplate>\n  \u003Cvk-data-table :data=\"table1.data\" :columns=\"table1.columns\">\u003C\u002Fvk-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      table1: {\n        data: [],\n        columns: [\n          { key: \"_id\", title: \"ID\", type: \"text\", width: 200 },\n          { key: \"username\", title: \"用户名\", type: \"text\", width: 150 },\n          { key: \"nickname\", title: \"昵称\", type: \"text\", width: 150 },\n          { key: \"mobile\", title: \"手机号\", type: \"text\", width: 150 }\n        ]\n      }\n    };\n  }\n};\n\u003C\u002Fscript>\n```\n\n### 动态数据（云函数）\n\n```vue\n\u003Ctemplate>\n  \u003Cvk-data-table\n    ref=\"table1\"\n    action=\"admin\u002Fuser\u002Fsys\u002FgetList\"\n    :columns=\"table1.columns\"\n    :query-form-param=\"queryForm1\"\n    :pagination=\"true\"\n    :page-size=\"20\"\n  >\u003C\u002Fvk-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      table1: {\n        columns: [\n          { key: \"username\", title: \"用户名\", type: \"text\", width: 150 },\n          { key: \"nickname\", title: \"昵称\", type: \"text\", width: 150 },\n          { key: \"_add_time\", title: \"添加时间\", type: \"time\", width: 160 }\n        ]\n      },\n      queryForm1: {\n        formData: {},\n        columns: []\n      }\n    };\n  }\n};\n\u003C\u002Fscript>\n```\n\n## Common Configurations\n\n### 1. columns字段配置\n\ncolumns是表格的核心配置，定义每个字段的显示规则：\n\n```javascript\ncolumns: [\n  {\n    key: \"username\",           \u002F\u002F 字段键名\n    title: \"用户名\",            \u002F\u002F 列标题\n    type: \"text\",              \u002F\u002F 字段类型\n    width: 150,                \u002F\u002F 列宽度\n    align: \"center\",           \u002F\u002F 对齐方式：left\u002Fcenter\u002Fright\n    sortable: \"custom\",        \u002F\u002F 是否可排序\n    show: [\"row\", \"detail\"],   \u002F\u002F 显示场景：row\u002Fdetail\u002Fexpand\u002Fnone\n    formatter: (val, row) => { \u002F\u002F 自定义格式化\n      return val + \"（已审核）\";\n    }\n  }\n]\n```\n\n**常用字段类型：**\n- `text` - 文本\n- `image` - 图片\n- `tag` - 标签\n- `switch` - 开关\n- `time` - 时间\n- `money` - 金额\n- `radio\u002Fselect\u002Fcheckbox` - 选择类\n- `html` - HTML渲染\n\n详见：[字段类型完整列表](references\u002Fcolumns-types.md)\n\n### 2. 右侧操作按钮\n\n```javascript\ntable1: {\n  rightBtns: [\n    'detail_auto',  \u002F\u002F 自动详情\n    {\n      mode: 'update',\n      title: '编辑',\n      type: 'primary',\n      show: (item) => {\n        \u002F\u002F 根据条件显示按钮\n        return item.status === 1;\n      }\n    },\n    {\n      mode: 'delete',\n      title: '删除',\n      type: 'danger',\n      disabled: (item) => {\n        \u002F\u002F 根据条件禁用按钮\n        return item._id === 'admin';\n      }\n    },\n    'more'  \u002F\u002F 更多按钮\n  ],\n  rightBtnsMore: [\n    {\n      title: '重置密码',\n      onClick: (item) => {\n        vk.toast(`重置${item.username}的密码`);\n      }\n    }\n  ]\n}\n```\n\n### 3. 分页配置\n\n```vue\n\u003Cvk-data-table\n  :pagination=\"true\"\n  :page-size=\"20\"\n  :page-sizes=\"[10, 20, 50, 100]\"\n  :get-count=\"'auto'\"\n  :max-page-count=\"1000\"\n>\u003C\u002Fvk-data-table>\n```\n\n**分页方案：**\n- `getCount=\"true\"` - 传统分页（每次都count）\n- `getCount=\"auto\"` - 智能分页（默认，首次count）\n- `getCount=\"false\"` - 滚动分页（从不count）\n\n详见：[分页方案详解](references\u002Fpagination.md)\n\n### 4. 表格查询组件\n\n```vue\n\u003Ctemplate>\n  \u003C!-- 查询组件 -->\n  \u003Cvk-data-table-query\n    v-model=\"queryForm1.formData\"\n    :columns=\"queryForm1.columns\"\n    @search=\"search\"\n  >\u003C\u002Fvk-data-table-query>\n\n  \u003C!-- 表格组件 -->\n  \u003Cvk-data-table\n    :query-form-param=\"queryForm1\"\n  >\u003C\u002Fvk-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      queryForm1: {\n        formData: {\n          nickname: \"\",\n          _add_time: []\n        },\n        columns: [\n          { key: \"nickname\", title: \"昵称\", type: \"text\", mode: \"%%\" },\n          { key: \"_add_time\", title: \"添加时间\", type: \"datetimerange\", mode: \"[]\" }\n        ]\n      }\n    };\n  },\n  methods: {\n    search() {\n      this.$refs.table1.search();\n    }\n  }\n};\n\u003C\u002Fscript>\n```\n\n**查询模式（mode）：**\n- `=` - 精确匹配\n- `%%` - 模糊匹配\n- `>` \u002F `>=` \u002F `\u003C` \u002F `\u003C=` - 数值比较\n- `[]` - 范围查询\n- `in` \u002F `nin` - 在\u002F不在数组中\n\n详见：[查询组件完整指南](references\u002Fquery-component.md)\n\n## Events & Methods\n\n### 常用事件\n\n```vue\n\u003Cvk-data-table\n  @success=\"onSuccess\"\n  @detail=\"onDetail\"\n  @update=\"onUpdate\"\n  @delete=\"onDelete\"\n  @row-click=\"onRowClick\"\n>\u003C\u002Fvk-data-table>\n```\n\n```javascript\nmethods: {\n  onSuccess({ data, list, total }) {\n    console.log(\"查询成功\", list);\n  },\n  onDetail({ item, row }) {\n    console.log(\"查看详情\", item);\n  },\n  onUpdate({ item, row }) {\n    console.log(\"编辑\", item);\n  },\n  onDelete({ item, deleteFn }) {\n    vk.confirm(\"确认删除？\", () => {\n      deleteFn(); \u002F\u002F 调用删除函数\n    });\n  }\n}\n```\n\n### 常用方法\n\n```javascript\n\u002F\u002F 刷新表格\nthis.$refs.table1.refresh();\n\n\u002F\u002F 查询\nthis.$refs.table1.search();\n\n\u002F\u002F 显示详情\nthis.$refs.table1.showDetail(item);\n\n\u002F\u002F 获取选中行\nlet row = this.$refs.table1.getCurrentRow();\n\n\u002F\u002F 获取多选数据\nlet rows = this.$refs.table1.getMultipleSelection();\n\n\u002F\u002F 导出Excel\nthis.$refs.table1.exportExcel({\n  fileName: \"用户列表\",\n  pageIndex: 1,\n  pageSize: -1  \u002F\u002F -1表示导出所有数据\n});\n```\n\n详见：[事件和方法完整列表](references\u002Fevents-methods.md)\n\n## Slots\n\n### 自定义字段渲染\n\n```vue\n\u003Cvk-data-table>\n  \u003C!-- 自定义gender字段 -->\n  \u003Ctemplate v-slot:gender=\"{ row, column, index }\">\n    \u003Cel-tag :type=\"row.gender === 1 ? 'primary' : 'success'\">\n      {{ row.gender === 1 ? '男' : '女' }}\n    \u003C\u002Fel-tag>\n  \u003C\u002Ftemplate>\n\n  \u003C!-- 展开行 -->\n  \u003Ctemplate v-slot:tableExpand=\"{ row }\">\n    \u003Cdiv>展开内容：{{ row._id }}\u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\n  \u003C!-- 表头插槽 -->\n  \u003Ctemplate v-slot:header_nickname=\"{ column }\">\n    \u003Cel-input v-model=\"queryForm1.formData.nickname\" placeholder=\"搜索昵称\">\u003C\u002Fel-input>\n  \u003C\u002Ftemplate>\n\u003C\u002Fvk-data-table>\n```\n\n详见：[插槽使用指南](references\u002Fslots.md)\n\n## Best Practices\n\n### 1. 与vk.baseDao.getTableData配合\n\n**前端传递columns参数：**\n\n```javascript\nvk.callFunction({\n  url: \"admin\u002Fuser\u002Fsys\u002FgetList\",\n  data: {\n    columns: [{\n      key: \"nickname\",\n      type: \"text\",\n      mode: \"%%\"  \u002F\u002F 必须指定mode\n    }],\n    formData: { nickname: \"张\" },\n    pageIndex: 1,\n    pageSize: 20\n  }\n});\n```\n\n**云函数使用getTableData：**\n\n```javascript\nlet res = await vk.baseDao.getTableData({\n  dbName: \"uni-id-users\",\n  data: event.data,  \u002F\u002F 前端传来的data\n  whereJson: {\n    is_delete: false  \u002F\u002F 强制条件\n  }\n});\n```\n\n### 2. 性能优化\n\n- **大表使用滚动分页**：`getCount=\"false\"`\n- **限制最大页数**：`max-page-count=\"1000\"`\n- **使用异常重试**：`retry-count=\"3\"`\n- **避免复杂计算**：使用formatter而非computed\n\n### 3. 权限控制\n\n```javascript\nrightBtns: [\n  {\n    mode: 'delete',\n    title: '删除',\n    show: (item) => {\n      return this.$hasRole(\"admin\") || this.$hasPermission(\"user-delete\");\n    }\n  }\n]\n```\n\n### 4. 数据预处理\n\n```javascript\ntable1: {\n  dataPreprocess: (list) => {\n    return list.map(item => {\n      item.fullname = item.firstname + \" \" + item.lastname;\n      return item;\n    });\n  }\n}\n```\n\n## When to Consult References\n\n查看详细参考文档的场景：\n\n- **[columns-types.md](references\u002Fcolumns-types.md)** - 需要了解所有字段类型（30+种）的详细配置\n- **[pagination.md](references\u002Fpagination.md)** - 需要深入理解分页方案选择和性能优化\n- **[events-methods.md](references\u002Fevents-methods.md)** - 需要完整的事件列表和方法API\n- **[slots.md](references\u002Fslots.md)** - 需要使用复杂的插槽自定义\n- **[query-component.md](references\u002Fquery-component.md)** - 需要实现复杂的查询功能（连表、范围查询等）\n","# vk-data-table 万能表格组件\n\n## Overview\n\nvk-data-table是vk-unicloud-admin框架的核心表格组件，通过JSON配置实现数据展示、查询、排序、分页、CRUD操作等功能。支持静态数据和动态数据（云函数\u002FHTTP请求），配合vk.baseDao.getTableData可实现高性能的数据查询。\n\n## Quick Start\n\n### 基础用法（静态数据）\n\n```vue\n\u003Ctemplate>\n  \u003Cvk-data-table :data=\"table1.data\" :columns=\"table1.columns\">\u003C\u002Fvk-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      table1: {\n        data: [],\n        columns: [\n          { key: \"_id\", title: \"ID\", type: \"text\", width: 200 },\n          { key: \"username\", title: \"用户名\", type: \"text\", width: 150 },\n          { key: \"nickname\", title: \"昵称\", type: \"text\", width: 150 },\n          { key: \"mobile\", title: \"手机号\", type: \"text\", width: 150 }\n        ]\n      }\n    };\n  }\n};\n\u003C\u002Fscript>\n```\n\n### 动态数据（云函数）\n\n```vue\n\u003Ctemplate>\n  \u003Cvk-data-table\n    ref=\"table1\"\n    action=\"admin\u002Fuser\u002Fsys\u002FgetList\"\n    :columns=\"table1.columns\"\n    :query-form-param=\"queryForm1\"\n    :pagination=\"true\"\n    :page-size=\"20\"\n  >\u003C\u002Fvk-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      table1: {\n        columns: [\n          { key: \"username\", title: \"用户名\", type: \"text\", width: 150 },\n          { key: \"nickname\", title: \"昵称\", type: \"text\", width: 150 },\n          { key: \"_add_time\", title: \"添加时间\", type: \"time\", width: 160 }\n        ]\n      },\n      queryForm1: {\n        formData: {},\n        columns: []\n      }\n    };\n  }\n};\n\u003C\u002Fscript>\n```\n\n## Common Configurations\n\n### 1. columns字段配置\n\ncolumns是表格的核心配置，定义每个字段的显示规则：\n\n```javascript\ncolumns: [\n  {\n    key: \"username\",           \u002F\u002F 字段键名\n    title: \"用户名\",            \u002F\u002F 列标题\n    type: \"text\",              \u002F\u002F 字段类型\n    width: 150,                \u002F\u002F 列宽度\n    align: \"center\",           \u002F\u002F 对齐方式：left\u002Fcenter\u002Fright\n    sortable: \"custom\",        \u002F\u002F 是否可排序\n    show: [\"row\", \"detail\"],   \u002F\u002F 显示场景：row\u002Fdetail\u002Fexpand\u002Fnone\n    formatter: (val, row) => { \u002F\u002F 自定义格式化\n      return val + \"（已审核）\";\n    }\n  }\n]\n```\n\n**常用字段类型：**\n- `text` - 文本\n- `image` - 图片\n- `tag` - 标签\n- `switch` - 开关\n- `time` - 时间\n- `money` - 金额\n- `radio\u002Fselect\u002Fcheckbox` - 选择类\n- `html` - HTML渲染\n\n详见：[字段类型完整列表](references\u002Fcolumns-types.md)\n\n### 2. 右侧操作按钮\n\n```javascript\ntable1: {\n  rightBtns: [\n    'detail_auto',  \u002F\u002F 自动详情\n    {\n      mode: 'update',\n      title: '编辑',\n      type: 'primary',\n      show: (item) => {\n        \u002F\u002F 根据条件显示按钮\n        return item.status === 1;\n      }\n    },\n    {\n      mode: 'delete',\n      title: '删除',\n      type: 'danger',\n      disabled: (item) => {\n        \u002F\u002F 根据条件禁用按钮\n        return item._id === 'admin';\n      }\n    },\n    'more'  \u002F\u002F 更多按钮\n  ],\n  rightBtnsMore: [\n    {\n      title: '重置密码',\n      onClick: (item) => {\n        vk.toast(`重置${item.username}的密码`);\n      }\n    }\n  ]\n}\n```\n\n### 3. 分页配置\n\n```vue\n\u003Cvk-data-table\n  :pagination=\"true\"\n  :page-size=\"20\"\n  :page-sizes=\"[10, 20, 50, 100]\"\n  :get-count=\"'auto'\"\n  :max-page-count=\"1000\"\n>\u003C\u002Fvk-data-table>\n```\n\n**分页方案：**\n- `getCount=\"true\"` - 传统分页（每次都count）\n- `getCount=\"auto\"` - 智能分页（默认，首次count）\n- `getCount=\"false\"` - 滚动分页（从不count）\n\n详见：[分页方案详解](references\u002Fpagination.md)\n\n### 4. 表格查询组件\n\n```vue\n\u003Ctemplate>\n  \u003C!-- 查询组件 -->\n  \u003Cvk-data-table-query\n    v-model=\"queryForm1.formData\"\n    :columns=\"queryForm1.columns\"\n    @search=\"search\"\n  >\u003C\u002Fvk-data-table-query>\n\n  \u003C!-- 表格组件 -->\n  \u003Cvk-data-table\n    :query-form-param=\"queryForm1\"\n  >\u003C\u002Fvk-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      queryForm1: {\n        formData: {\n          nickname: \"\",\n          _add_time: []\n        },\n        columns: [\n          { key: \"nickname\", title: \"昵称\", type: \"text\", mode: \"%%\" },\n          { key: \"_add_time\", title: \"添加时间\", type: \"datetimerange\", mode: \"[]\" }\n        ]\n      }\n    };\n  },\n  methods: {\n    search() {\n      this.$refs.table1.search();\n    }\n  }\n};\n\u003C\u002Fscript>\n```\n\n**查询模式（mode）：**\n- `=` - 精确匹配\n- `%%` - 模糊匹配\n- `>` \u002F `>=` \u002F `\u003C` \u002F `\u003C=` - 数值比较\n- `[]` - 范围查询\n- `in` \u002F `nin` - 在\u002F不在数组中\n\n详见：[查询组件完整指南](references\u002Fquery-component.md)\n\n## Events & Methods\n\n### 常用事件\n\n```vue\n\u003Cvk-data-table\n  @success=\"onSuccess\"\n  @detail=\"onDetail\"\n  @update=\"onUpdate\"\n  @delete=\"onDelete\"\n  @row-click=\"onRowClick\"\n>\u003C\u002Fvk-data-table>\n```\n\n```javascript\nmethods: {\n  onSuccess({ data, list, total }) {\n    console.log(\"查询成功\", list);\n  },\n  onDetail({ item, row }) {\n    console.log(\"查看详情\", item);\n  },\n  onUpdate({ item, row }) {\n    console.log(\"编辑\", item);\n  },\n  onDelete({ item, deleteFn }) {\n    vk.confirm(\"确认删除？\", () => {\n      deleteFn(); \u002F\u002F 调用删除函数\n    });\n  }\n}\n```\n\n### 常用方法\n\n```javascript\n\u002F\u002F 刷新表格\nthis.$refs.table1.refresh();\n\n\u002F\u002F 查询\nthis.$refs.table1.search();\n\n\u002F\u002F 显示详情\nthis.$refs.table1.showDetail(item);\n\n\u002F\u002F 获取选中行\nlet row = this.$refs.table1.getCurrentRow();\n\n\u002F\u002F 获取多选数据\nlet rows = this.$refs.table1.getMultipleSelection();\n\n\u002F\u002F 导出Excel\nthis.$refs.table1.exportExcel({\n  fileName: \"用户列表\",\n  pageIndex: 1,\n  pageSize: -1  \u002F\u002F -1表示导出所有数据\n});\n```\n\n详见：[事件和方法完整列表](references\u002Fevents-methods.md)\n\n## Slots\n\n### 自定义字段渲染\n\n```vue\n\u003Cvk-data-table>\n  \u003C!-- 自定义gender字段 -->\n  \u003Ctemplate v-slot:gender=\"{ row, column, index }\">\n    \u003Cel-tag :type=\"row.gender === 1 ? 'primary' : 'success'\">\n      {{ row.gender === 1 ? '男' : '女' }}\n    \u003C\u002Fel-tag>\n  \u003C\u002Ftemplate>\n\n  \u003C!-- 展开行 -->\n  \u003Ctemplate v-slot:tableExpand=\"{ row }\">\n    \u003Cdiv>展开内容：{{ row._id }}\u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\n  \u003C!-- 表头插槽 -->\n  \u003Ctemplate v-slot:header_nickname=\"{ column }\">\n    \u003Cel-input v-model=\"queryForm1.formData.nickname\" placeholder=\"搜索昵称\">\u003C\u002Fel-input>\n  \u003C\u002Ftemplate>\n\u003C\u002Fvk-data-table>\n```\n\n详见：[插槽使用指南](references\u002Fslots.md)\n\n## Best Practices\n\n### 1. 与vk.baseDao.getTableData配合\n\n**前端传递columns参数：**\n\n```javascript\nvk.callFunction({\n  url: \"admin\u002Fuser\u002Fsys\u002FgetList\",\n  data: {\n    columns: [{\n      key: \"nickname\",\n      type: \"text\",\n      mode: \"%%\"  \u002F\u002F 必须指定mode\n    }],\n    formData: { nickname: \"张\" },\n    pageIndex: 1,\n    pageSize: 20\n  }\n});\n```\n\n**云函数使用getTableData：**\n\n```javascript\nlet res = await vk.baseDao.getTableData({\n  dbName: \"uni-id-users\",\n  data: event.data,  \u002F\u002F 前端传来的data\n  whereJson: {\n    is_delete: false  \u002F\u002F 强制条件\n  }\n});\n```\n\n### 2. 性能优化\n\n- **大表使用滚动分页**：`getCount=\"false\"`\n- **限制最大页数**：`max-page-count=\"1000\"`\n- **使用异常重试**：`retry-count=\"3\"`\n- **避免复杂计算**：使用formatter而非computed\n\n### 3. 权限控制\n\n```javascript\nrightBtns: [\n  {\n    mode: 'delete',\n    title: '删除',\n    show: (item) => {\n      return this.$hasRole(\"admin\") || this.$hasPermission(\"user-delete\");\n    }\n  }\n]\n```\n\n### 4. 数据预处理\n\n```javascript\ntable1: {\n  dataPreprocess: (list) => {\n    return list.map(item => {\n      item.fullname = item.firstname + \" \" + item.lastname;\n      return item;\n    });\n  }\n}\n```\n\n## When to Consult References\n\n查看详细参考文档的场景：\n\n- **[columns-types.md](references\u002Fcolumns-types.md)** - 需要了解所有字段类型（30+种）的详细配置\n- **[pagination.md](references\u002Fpagination.md)** - 需要深入理解分页方案选择和性能优化\n- **[events-methods.md](references\u002Fevents-methods.md)** - 需要完整的事件列表和方法API\n- **[slots.md](references\u002Fslots.md)** - 需要使用复杂的插槽自定义\n- **[query-component.md](references\u002Fquery-component.md)** - 需要实现复杂的查询功能（连表、范围查询等）\n",{"name":5,"description":7},"main","309495d95536f4a5e4db1a251f246589229e13e8","skills\u002Fvk-data-table",0,"https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills","https:\u002F\u002Fgithub.com\u002Fcaobingsheng","2026-04-11 12:21:07",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add caobingsheng\u002Fskills --skill vk-data-table",{"tool":66,"command":67},"bunx","bunx skills add caobingsheng\u002Fskills --skill vk-data-table",{"tool":69,"command":70},"pnpm","pnpm dlx skills add caobingsheng\u002Fskills --skill vk-data-table","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002FSKILL.md",true,[74,80,84,88,92],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fcolumns-types.md","REFERENCE","参考文档",6868,"https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002Freferences\u002Fcolumns-types.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fevents-methods.md",12206,"https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002Freferences\u002Fevents-methods.md",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fpagination.md",6313,"https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002Freferences\u002Fpagination.md",{"path":89,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fquery-component.md",13502,"https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002Freferences\u002Fquery-component.md",{"path":93,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Fslots.md",12118,"https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fvk-data-table\u002Freferences\u002Fslots.md",[97,114,129,142,153,183],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":106,"publishedAt":48},"01M6J72F9FX5W05JHBQQW9EHS5","tdd-workflows-tdd-refactor","Use when working with tdd workflows tdd refactor","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Ftdd\u002Ftdd-workflows-tdd-refactor\u002FSKILL.md",[103],{"categoryNo":104,"categoryName":105,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",[107,108,109,110,111,42,112,37,113],"tdd","workflows","refactor","tdd workflows","tdd workflows tdd refactor","community","unknown",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":48},"01M6J72BQ4NV5HEX94RQJ8B4J2","tdd-workflows-tdd-red","Generate failing tests for the TDD red phase to define expected behavior and edge cases.","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Ftdd\u002Ftdd-workflows-tdd-red\u002FSKILL.md",[],[121,107,108,122,110,123,124,125,112,126,127,35,128,113],"red","tdd workflows tdd red","edge","generate","behavior","define","tests","expected",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":48},"01M6J727C8Q52EG3RTQWMC2X61","tdd-workflows-tdd-green","Implement the minimal code needed to make failing tests pass in the TDD green phase.","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Ftdd\u002Ftdd-workflows-tdd-green\u002FSKILL.md",[],[136,110,137,108,107,138,112,139,140,127,141,113],"green","tdd workflows tdd green","implement","minimal","code","make",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":149,"publishedAt":48},"01M6J723JYFES8D9PHGY81QBHZ","tdd-workflows-tdd-cycle","Use when working with tdd workflows tdd cycle","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Ftdd\u002Ftdd-workflows-tdd-cycle\u002FSKILL.md",[148],{"categoryNo":104,"categoryName":105,"taxonomyType":20,"taxonomyTypeDesc":21},[107,108,150,151,152,110,112,37,42,113],"cycle","tdd cycle","tdd workflows tdd cycle",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":168,"publishedAt":48},"01M6J71ZC3W0FE9CKQGYRCSRCA","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Ftdd\u002Ftdd-workflow\u002FSKILL.md",[159,162,165],{"categoryNo":160,"categoryName":161,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":163,"categoryName":164,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":166,"categoryName":167,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000030","开发工程师",[169,170,107,171,172,42,173,174,37,175,176,127,177,178,179,180,140,181,182],"tdd workflow","workflow","writing","test","features","bugs","unit","driven","coverage","refactoring","e2e","integration","development","e2e tests",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":191,"publishedAt":48},"01M6J71VTWV5GP7AQ08G4CDWFG","tdd-orchestrator","Master TDD orchestrator specializing in red-green-refactor discipline, multi-agent workflow coordination, and comprehensive test-driven development practices.","https:\u002F\u002Fgithub.com\u002Fcaobingsheng\u002Fskills\u002Fblob\u002Fmain\u002Ftdd\u002Ftdd-orchestrator\u002FSKILL.md",[189,190],{"categoryNo":160,"categoryName":161,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":163,"categoryName":164,"taxonomyType":20,"taxonomyTypeDesc":21},[107,192,193,194,113,195,121,176,136,196,112,197,198,199,200,109,181,172,170],"orchestrator","tdd orchestrator","master","multi","agent workflow","red-green-refactor","discipline","multi-agent","coordination"]