docs: 更新Table组件文档

刘汉宸
1 parent c97fa6d2
Showing 1 changed file with 38 additions and 0 deletions Show diff stats
examples/views/docs/component/table.md
@@ -99,6 +99,44 @@ export default {
 </div>
+## 层级分组
+
+支持`group`分组，兼容form组件，使同一个scheme能够同时复用在`table`、`form`上
+
+::: snippet `group`设置分组，其中`key`设置分组对象名称
+
+```html
+<template>
+  <z-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '张三', age: 16, location: { city: '上海', address: '青浦区' } },
+        { name: '李四', age: 24, location: { city: '北京', address: '朝阳区' } }
+      ],
+      list: [
+        { label: '姓名', key: 'name' },
+        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
+        {
+          group: { key: 'location' },
+          list: [
+            { label: '城市', key: 'city' },
+          ]
+        },
+        { label: '地址', key: 'location.address' },
+      ]
+    }
+  } 
+}
+</script>
+```
+
+:::
+
 ## API
 ## Attribute 属性
	@@ -99,6 +99,44 @@ export default {		@@ -99,6 +99,44 @@ export default {
99		99
100	</div>	100	</div>
101		101
		102	+## 层级分组
		103	+
		104	+支持`group`分组，兼容form组件，使同一个scheme能够同时复用在`table`、`form`上
		105	+
		106	+::: snippet `group`设置分组，其中`key`设置分组对象名称
		107	+
		108	+```html
		109	+<template>
		110	+ <z-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-table>
		111	+</template>
		112	+
		113	+<script>
		114	+export default {
		115	+ data() {
		116	+ return {
		117	+ tableData: [
		118	+ { name: '张三', age: 16, location: { city: '上海', address: '青浦区' } },
		119	+ { name: '李四', age: 24, location: { city: '北京', address: '朝阳区' } }
		120	+ ],
		121	+ list: [
		122	+ { label: '姓名', key: 'name' },
		123	+ { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
		124	+ {
		125	+ group: { key: 'location' },
		126	+ list: [
		127	+ { label: '城市', key: 'city' },
		128	+ ]
		129	+ },
		130	+ { label: '地址', key: 'location.address' },
		131	+ ]
		132	+ }
		133	+ }
		134	+}
		135	+</script>
		136	+```
		137	+
		138	+:::
		139	+
102	## API	140	## API
103		141
104	## Attribute 属性	142	## Attribute 属性