From 739ee90bb092c864e5104f8043dfa2a18d8b2d94 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Wed, 28 Aug 2019 14:11:06 +0800
Subject: [PATCH] 更新Search组件文档

---
 examples/views/docs/component/detail.md |  1 +
 examples/views/docs/component/form.md   |  4 +++-
 examples/views/docs/component/search.md | 50 ++++++++++++++++++++++++++------------------------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/examples/views/docs/component/detail.md b/examples/views/docs/component/detail.md
index b1e4a72..0890e6f 100644
--- a/examples/views/docs/component/detail.md
+++ b/examples/views/docs/component/detail.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 | -
diff --git a/examples/views/docs/component/form.md b/examples/views/docs/component/form.md
index 203f485..7320de5 100644
--- a/examples/views/docs/component/form.md
+++ b/examples/views/docs/component/form.md
@@ -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
diff --git a/examples/views/docs/component/search.md b/examples/views/docs/component/search.md
index c7d12ee..1cbd337 100644
--- a/examples/views/docs/component/search.md
+++ b/examples/views/docs/component/search.md
@@ -1,40 +1,33 @@
 # 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: "100%" }
 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
--
libgit2 0.21.0