更新Search组件文档

Aaron
1 parent 9802b799
Showing 3 changed files with 30 additions and 25 deletions Show diff stats
examples/views/docs/component/detail.md
examples/views/docs/component/form.md
examples/views/docs/component/search.md
@@ -208,3 +208,4 @@ key | 参数名 | String | - | -
 label | 参数标签 | String | - | -
 span | 数据项占位 | Number | 0 - 24 | -
 group | 数据项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
+span | 数据项占位 | Number | 0 - 24 | -
@@ -252,4 +252,6 @@ on | 组件事件，Function时需要返回事件的Object | Object,Function(mod
 visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
 show | 组件v-show状态 | Boolean,Function(model: object) | - | true
 rules | 组件校验规则 | Object,Array | - | -
-tip | 组件提示框 | Object,String | - | {}
 \ No newline at end of file
+tip | 组件提示框 | Object,String | - | {}
+group | 表单项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
+span | 表单项占位 | Number | 0 - 24 | -
 \ No newline at end of file
 # Search 搜索
-Search 搜索组件是一个使用`list`来配置生成的搜索表单
+使用数据配置项列表快速生成一个搜索表单，配置方法和**Form**组件类似
 ## 基础用法
-配置项list中通过type可以配置任意组件，不受框架限制
+配置项list中通过type可以配置任意表单组件，不受框架约定限制
-::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
+::: snippet 使用`list`属性设置数据源，其中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则，`props`设置组件参数
 ```html
 <template>
-  <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8" :searching="searching"></eagle-search>
+  <eagle-search :list="searchList" @search="handleSearch" @reset="handleReset" :span="8"></eagle-search>
 </template>
 <script>
 export default {
   data() {
     return {
-      searching: false,
       searchList: [
         { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
-        { type: 'eagle-select', key: 'type', label: '类型', props: { dataSource: [{ label: '呆萌', value: '1' }, { label: '二货', value: '2' }] } },
+        { type: 'el-input-number', key: 'type', label: '类型' },
         { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" } },
-        { type: 'el-input', key: 'number', label: '楼栋号' },
-        { type: 'el-input', key: 'not', label: '我不是', visible: (model) => model.type === '2' },
-        { type: 'el-input', key: 'no', label: '我没有', visible: (model) => model.type === '2' },
-        { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => model.type === '2' },
+        { type: 'el-input', key: 'address', label: '地址' },
+        { type: 'el-input', key: 'not', label: '我不是', visible: (model) => `${model.type}` === '2' },
+        { type: 'el-input', key: 'no', label: '我没有', visible: (model) => `${model.type}` === '2' },
+        { type: 'el-input', key: 'never', label: '别瞎说啊', visible: (model) => `${model.type}` === '2' },
       ]
     }
   },
-  mounted() {
-    this.searching = true;
-    setTimeout(() => {
-      this.searching = false;
-    }, 3000);
-  },
   methods: {
     handleSearch(value) {
       console.log(value);
@@ -51,15 +44,18 @@ export default {
 ## 自定义组件
-在使用`list`的同时，也支持通过`slot`传入组件，以满足不同的业务需求
+在使用`list`的同时，也支持**表单项具名插槽**，以满足不同的业务需求
-::: snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，支持通过`rules`配置校验规则
+::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`key`，返回值为model及对应配置项所有参数
 ```html
 <template>
   <eagle-search :list="searchList">
     <template #type="{ model }">
-      <eagle-select v-model="model.type" :dataSource="dataSource"></eagle-select>
+      <el-select v-model="model.type">
+        <el-option value="A">选项A</el-option>
+        <el-option value="B">选项B</el-option>
+      </el-select>
     </template>
     <template #button-group="{ model, collapse, doSearch, doReset, doCollapse }">
       <el-button size="mini" type="primary" round @click="handleQuery(model, doSearch)">搜索</el-button>
@@ -80,10 +76,6 @@ export default {
         { type: 'el-input', key: 'yeah', label: '没错' },
         { type: 'el-input', key: 'absolutely', label: '就这样' },
       ],
-      dataSource: [
-        { label: '选项A', value: 'A' },
-        { label: '选项B', value: 'B' },
-      ]
     }
   },
   methods: {
@@ -108,6 +100,15 @@ export default {
 -|-|-|-|-
 value / v-model |	绑定值 | Object | - | -
 list | 表单项配置列表 | Array | - | []
+formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
+span | 表单项占位 | Number | 0 - 24 | 6
+searching | 查询按钮加载状态 | Boolean | true/false | false
+
+## Methods 方法
+
+方法名|说明|参数
+-|-|-
+setModelValue | 设置表单值 | model
 ## Events 事件
@@ -129,4 +130,5 @@ style | 组件样式 | Object | - | { width: &quot;100%&quot; }
 on | 组件事件 | Object,Function(model: object) | - | {}
 visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
 rules | 组件校验规则 | Object,Array | - | -
-tip | 组件提示框 | Object,String | - | {}
 \ No newline at end of file
+tip | 组件提示框 | Object,String | - | {}
+span | 表单项占位 | Number | 0 - 24 | -
 \ No newline at end of file
	@@ -208,3 +208,4 @@ key \| 参数名 \| String \| - \| -		@@ -208,3 +208,4 @@ key \| 参数名 \| String \| - \| -
208	label \| 参数标签 \| String \| - \| -	208	label \| 参数标签 \| String \| - \| -
209	span \| 数据项占位 \| Number \| 0 - 24 \| -	209	span \| 数据项占位 \| Number \| 0 - 24 \| -
210	group \| 数据项分组，为Object类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 \| String,Object \| - \| -	210	group \| 数据项分组，为Object类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 \| String,Object \| - \| -
		211	+span \| 数据项占位 \| Number \| 0 - 24 \| -