{
  "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 行使用。"
  ]
}