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	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	257	## API
188	258
189	259	## Attribute 属性
...	...