docs: 更新Form组件文档

刘汉宸
1 parent 0adf83d0
Showing 1 changed file with 70 additions and 0 deletions Show diff stats
examples/views/docs/component/form.md
@@ -184,6 +184,76 @@ export default {
 :::
+## 自定义渲染
+
+对于一些特殊渲染逻辑的表单项，可以进行自定义渲染
+
+<div class="code-snippet-box">
+
+::: snippet 通过`render`方法渲染
+
+```html
+<template>
+  <div>
+    <pre class="demo-model">{{ model }}</pre>
+    <z-form v-model="model" :list="list" label-width="80px"></z-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: { name: '', age: '' },
+      list: [
+        { type: 'el-input', label: '姓名', key: 'name' },
+        { type: 'el-input', label: '年龄', key: 'age', type: (h, { model, config }) => { return h('el-input-number', config, model.age) }, props: { 'controls-position': 'right' } },
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+::: snippet 通过`slot`插槽渲染
+
+```html
+<template>
+  <div>
+    <pre class="demo-model">{{ model }}</pre>
+    <z-form v-model="model" :list="list" label-width="80px">
+      <template slot="name">
+        <el-radio v-model="model.name" label="zs">张三</el-radio>
+        <el-radio v-model="model.name" label="ls">李四</el-radio>
+      </template>
+      <template slot="age">
+        <el-slider v-model="model.age"></el-slider>
+      </template>
+    </z-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: { name: 'zs', age: 0 },
+      list: [
+        { type: 'el-input', label: '姓名', key: 'name' },
+        { type: 'el-input', label: '年龄', key: 'age' },
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+</div>
+
 ## API
 ## Attribute 属性
	@@ -184,6 +184,76 @@ export default {		@@ -184,6 +184,76 @@ export default {
184		184
185	:::	185	:::
186		186
		187	+## 自定义渲染
		188	+
		189	+对于一些特殊渲染逻辑的表单项，可以进行自定义渲染
		190	+
		191	+<div class="code-snippet-box">
		192	+
		193	+::: snippet 通过`render`方法渲染
		194	+
		195	+```html
		196	+<template>
		197	+ <div>
		198	+ <pre class="demo-model">{{ model }}</pre>
		199	+ <z-form v-model="model" :list="list" label-width="80px"></z-form>
		200	+ </div>
		201	+</template>
		202	+
		203	+<script>
		204	+export default {
		205	+ data() {
		206	+ return {
		207	+ model: { name: '', age: '' },
		208	+ list: [
		209	+ { type: 'el-input', label: '姓名', key: 'name' },
		210	+ { type: 'el-input', label: '年龄', key: 'age', type: (h, { model, config }) => { return h('el-input-number', config, model.age) }, props: { 'controls-position': 'right' } },
		211	+ ]
		212	+ }
		213	+ },
		214	+}
		215	+</script>
		216	+```
		217	+
		218	+:::
		219	+
		220	+::: snippet 通过`slot`插槽渲染
		221	+
		222	+```html
		223	+<template>
		224	+ <div>
		225	+ <pre class="demo-model">{{ model }}</pre>
		226	+ <z-form v-model="model" :list="list" label-width="80px">
		227	+ <template slot="name">
		228	+ <el-radio v-model="model.name" label="zs">张三</el-radio>
		229	+ <el-radio v-model="model.name" label="ls">李四</el-radio>
		230	+ </template>
		231	+ <template slot="age">
		232	+ <el-slider v-model="model.age"></el-slider>
		233	+ </template>
		234	+ </z-form>
		235	+ </div>
		236	+</template>
		237	+
		238	+<script>
		239	+export default {
		240	+ data() {
		241	+ return {
		242	+ model: { name: 'zs', age: 0 },
		243	+ list: [
		244	+ { type: 'el-input', label: '姓名', key: 'name' },
		245	+ { type: 'el-input', label: '年龄', key: 'age' },
		246	+ ]
		247	+ }
		248	+ },
		249	+}
		250	+</script>
		251	+```
		252	+
		253	+:::
		254	+
		255	+</div>
		256	+
187	## API	257	## API
188		258
189	## Attribute 属性	259	## Attribute 属性