{"slug":"treetable","mode":"single","examples":[{"id":"treetable-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"demo\">\n  <h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n  <div class=\"kole-tt\" role=\"table\">\n    <table>\n      <thead>\n        <tr>\n          <th class=\"col-selection\" style=\"width:48px\">\n            <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n          </th>\n          <th>部门 / 人员</th>\n          <th class=\"align-right\">人数</th>\n          <th class=\"align-right\">预算(万)</th>\n        </tr>\n      </thead>\n      <tbody id=\"ttBody\"></tbody>\n      <tfoot>\n        <tr>\n          <td></td>\n          <td>合计</td>\n          <td class=\"align-right\" id=\"sumCount\">0</td>\n          <td class=\"align-right\" id=\"sumBudget\">0</td>\n        </tr>\n      </tfoot>\n    </table>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<h1>Kole UI · TreeTable 组件（纯 H5）</h1>\n<p>对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n<div class=\"kole-tt\" role=\"table\">\n  <table>\n    <thead>\n      <tr>\n        <th class=\"col-selection\" style=\"width:48px\">\n          <input class=\"tt-check\" id=\"ttAll\" type=\"checkbox\" />\n        </th>\n        <th>部门 / 人员</th>\n        <th class=\"align-right\">人数</th>\n        <th class=\"align-right\">预算(万)</th>\n      </tr>\n    </thead>\n    <tbody></tbody>\n    <tfoot>\n      <tr>\n        <td></td>\n        <td>合计</td>\n        <td class=\"align-right\">0</td>\n        <td class=\"align-right\">0</td>\n      </tr>\n    </tfoot>\n  </table>\n</div>","jsx":"import { KoleTreeTable } from 'kole-ui/react';\n\n<>\n<KoleTreeTable selectable role=\"table\">部门 / 人员 人数 预算(万) 合计 0</KoleTreeTable>\n</>","vue3":"import { KoleTreeTable } from 'kole-ui/vue3';\n\n<template>\n<KoleTreeTable selectable role=\"table\">部门 / 人员 人数 预算(万) 合计 0</KoleTreeTable>\n</template>","vue2":"import { KoleTreeTable } from 'kole-ui/vue2';\n\n<template>\n<KoleTreeTable selectable role=\"table\">部门 / 人员 人数 预算(万) 合计 0</KoleTreeTable>\n</template>"},"notes":[]}]}