106 lines
4.2 KiB
JSON
106 lines
4.2 KiB
JSON
{
|
||
"slug": "table",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 表格，列定义走 columns，选中态用 update:selectedKeys 配 .sync 双向同步。",
|
||
"usage": [
|
||
"Vue 2 端列选中态用 :selected-keys.sync=\"keys\" 写法，因为组件派发的是 update:selectedKeys 事件。",
|
||
"columns 是必填项，元素支持 key / title / align / sortable / width / fixed / type 等字段。",
|
||
"需要自定义单元格时把该列 type 设为 action，然后写 <template #action=\"{ row, index }\">，插槽会收到行数据与行号。",
|
||
"排序只派发事件不动数据：监听 sort-change 拿到 { key, order } 后由业务侧重排 data。",
|
||
"表头全选复选框通过自定义指令 v-indeterminate 表达半选，不需要外部传 indeterminate。"
|
||
],
|
||
"bestPractices": [
|
||
"rowKey 默认是 id，若数据结构主键不叫 id 必须显式传，否则勾选行会串位。",
|
||
"loading 时遮罩层 .loading-mask 覆盖在表格上，但事件并未被拦截，必要时业务侧自行禁用交互。",
|
||
"selectedKeys 是受控的：只监听而不回写 update:selectedKeys 会导致勾选外观不更新。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端载体是 props 加带 update: 前缀的事件（.sync）与作用域插槽，共 7 个 prop。",
|
||
"table": [
|
||
{
|
||
"name": "columns",
|
||
"type": "Array，必填",
|
||
"desc": "列定义，形如 [{ key, title, align, sortable, width, fixed, type }]"
|
||
},
|
||
{
|
||
"name": "data",
|
||
"type": "Array，默认空数组",
|
||
"desc": "行数据"
|
||
},
|
||
{
|
||
"name": "rowKey",
|
||
"type": "String，默认 'id'",
|
||
"desc": "行主键字段名，决定勾选与 :key 的取值"
|
||
},
|
||
{
|
||
"name": "selectable",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "是否显示首列复选框"
|
||
},
|
||
{
|
||
"name": "selectedKeys",
|
||
"type": "Array，默认空数组",
|
||
"desc": "已选主键集合，配合 .sync 使用"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "显示遮罩与 spinner"
|
||
},
|
||
{
|
||
"name": "emptyText",
|
||
"type": "String，默认 '暂无数据'",
|
||
"desc": "无数据时占位文案"
|
||
},
|
||
{
|
||
"name": "update:selectedKeys",
|
||
"type": "事件，参数为新的主键数组",
|
||
"desc": "勾选变化时派发，v-model 或 .sync 的接收端"
|
||
},
|
||
{
|
||
"name": "selection-change",
|
||
"type": "事件，参数为新的主键数组",
|
||
"desc": "与 update:selectedKeys 同时派发"
|
||
},
|
||
{
|
||
"name": "sort-change",
|
||
"type": "事件，参数为 { key, order }",
|
||
"desc": "点击可排序表头时派发，order 含 asc/desc"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"type": "作用域插槽，参数 { row, index }",
|
||
"desc": "type 为 action 的列会渲染该插槽"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"结构是真实的 table/thead/tr/th/tbody/td，读屏器能按行列关系播报。",
|
||
"排序指示符是文字箭头 ↑ ↓ ↕，没有 aria-sort，若要读屏器播报排序状态需业务侧补。",
|
||
"选择列复选框由原生 input 承担，但表头复选框没有 aria-label，读屏器只会念「复选框」。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Table.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Table.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Table.css",
|
||
"kind": "样式文件",
|
||
"desc": "Table.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"table-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Table.vue2.vue:58-66，columns 在第 59 行标 required: true。",
|
||
"三个事件在 frameworks/Table.vue2.vue:97-98 与 113 派发。",
|
||
"action 插槽见 frameworks/Table.vue2.vue:42，同时透传 row 与 index。",
|
||
"v-indeterminate 指令注册见 frameworks/Table.vue2.vue 的 directives 段，表头复选框在第 10 行使用。"
|
||
]
|
||
}
|