Alert/Select/Notification/Table doc update

examples/docs/alert.md

@@ -19,9 +19,13 @@
 
 ## Alert 警告
 
+用于页面中展示重要的提示信息。
+
 ### 基本用法
 
-::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
+页面中的非浮层，不会自动消失
+
+::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
 ```html
 <template>
   <el-alert
@@ -46,7 +50,9 @@
 
 ### 自定义关闭按钮
 
-::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
+自定义关闭按钮为文字或其他符号
+
+::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
 ```html
 <template>
   <el-alert
@@ -80,7 +86,9 @@
 
 ### 带有 icon
 
-::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
+表示某种状态时提升可读性
+
+::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
 ```html
 <template>
   <el-alert
@@ -109,7 +117,9 @@
 
 ### 带有辅助性文字介绍
 
-::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
+包含标题和内容，解释更详细的警告
+
+::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
 ```html
 <template>
   <el-alert

examples/docs/notification.md

@@ -9,6 +9,14 @@
       },
 
       open2() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条不会自动关闭的消息',
+          duration: 0
+        });
+      },
+
+      open3() {
         this.$notify({
           title: '成功',
           message: '这是一条成功的提示消息',
@@ -16,7 +24,7 @@
         });
       },
 
-      open3() {
+      open4() {
         this.$notify({
           title: '警告',
           message: '这是一条警告的提示消息',
@@ -24,7 +32,7 @@
         });
       },
 
-      open4() {
+      open5() {
         this.$notify({
           title: '消息',
           message: '这是一条消息的提示消息',
@@ -32,7 +40,7 @@
         });
       },
 
-      open5() {
+      open6() {
         this.$notify({
           title: '错误',
           message: '这是一条错误的提示消息',
@@ -40,22 +48,6 @@
         });
       },
 
-      open6() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条不会自动关闭的消息',
-          duration: 0
-        });
-      },
-
-      open7() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条带有回调函数的消息',
-          onClose: this.onClose
-        });
-      },
-
       onClose() {
         console.log('Notification 已关闭');
       }
@@ -71,16 +63,27 @@
   }
 </style>
 
-## 基本用法
+## Notification 通知
 
-::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。
+悬浮出现在页面右上角，显示全局的通知提醒消息。
+
+### 基本用法
+
+适用性广泛的通知栏
+
+::: demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
 ```html
 <template>
   <el-button
     plain
     @click.native="open">
-    点击展示 Notification
+    可自动关闭
   </el-button>
+  <el-button
+    plain
+    @click.native="open2">
+    不会自动关闭
+    </el-button>
 </template>
 
 <script>
@@ -91,6 +94,14 @@
           title: '标题名称',
           message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
         });
+      },
+
+      open2() {
+        this.$notify({
+          title: '提示',
+          message: '这是一条不会自动关闭的消息',
+          duration: 0
+        });
       }
     }
   }
@@ -98,29 +109,31 @@
 ```
 :::
 
-## 带有 icon
+### 带有倾向性
 
-::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。
+带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
+
+::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。
 ```html
 <template>
   <el-button
     plain
-    @click.native="open2">
+    @click.native="open3">
     成功
   </el-button>
   <el-button
     plain
-    @click.native="open3">
+    @click.native="open4">
     警告
   </el-button>
   <el-button
     plain
-    @click.native="open4">
+    @click.native="open5">
     消息
   </el-button>
   <el-button
     plain
-    @click.native="open5">
+    @click.native="open6">
     错误
   </el-button>
 </template>
@@ -128,7 +141,7 @@
 <script>
   export default {
     methods: {
-      open2() {
+      open3() {
         this.$notify({
           title: '成功',
           message: '这是一条成功的提示消息',
@@ -136,7 +149,7 @@
         });
       },
 
-      open3() {
+      open4() {
         this.$notify({
           title: '警告',
           message: '这是一条警告的提示消息',
@@ -144,7 +157,7 @@
         });
       },
 
-      open4() {
+      open5() {
         this.$notify({
           title: '消息',
           message: '这是一条消息的提示消息',
@@ -152,7 +165,7 @@
         });
       },
 
-      open5() {
+      open6() {
         this.$notify({
           title: '错误',
           message: '这是一条错误的提示消息',
@@ -165,73 +178,13 @@
 ```
 :::
 
-## 不会自动关闭
-
-::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。
-```html
-<template>
-  <el-button
-    plain
-    @click.native="open6">
-    不会自动关闭的 Notification
-  </el-button>
-</template>
-
-<script>
-  export default {
-    methods: {
-      open6() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条不会自动关闭的消息',
-          duration: 0
-        });
-      }
-    }
-  }
-</script>
-```
-:::
-
-## 回调函数
-
-::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。
-```html
-<template>
-  <el-button
-    plain
-    @click.native="open7">
-    带有回调函数的 Notification
-  </el-button>
-</template>
-
-<script>
-  export default {
-    methods: {
-      open7() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条带有回调函数的消息',
-          onClose: this.onClose
-        });
-      },
-
-      onClose() {
-        console.log('Notification 已关闭');
-      }
-    }
-  }
-</script>
-```
-:::
-
-## 全局方法
+### 全局方法
 
-Element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
+Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
 
-## 单独引用
+### 单独引用
 
-单独引入 `Notification`：
+单独引入 Notification：
 
 ```javascript
 import { Notification } from 'element-ui';
@@ -239,11 +192,11 @@ import { Notification } from 'element-ui';
 
 此时调用方法为 `Notification(options)`。
 
-## Options
+### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | 标题 | string | | |
-| message | 说明文字 | string | | |
-| type | 主题样式，如果不在可选值内将被忽略 | string | 'success', 'warning', 'info', 'error' | |
-| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
-| onClose | 关闭时的回调函数 | function | | |
+| title | 标题 | string | - | - |
+| message | 说明文字 | string | - | - |
+| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | - |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | - | 4500 |
+| onClose | 关闭时的回调函数 | function | - | - |

examples/docs/select.md

@@ -85,10 +85,11 @@
         value2: '',
         value3: '',
         value4: '',
-        value5: '',
+        value5: [],
         value6: '',
         value7: [],
-        value8: [],
+        value8: '',
+        value9: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -114,21 +115,24 @@
   };
 </script>
 
-## 基本用法
+## Select 选择器
 
-<el-select v-model="value">
-  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
-</el-select>
+当选项过多时，使用下拉菜单展示并选择内容。
 
+### 基础用法
+
+适用广泛的基础单选
+
+:::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
 ```html
 <template>
-<el-select v-model="value">
-  <el-option
-    v-for="item in options"
-    :label="item.label"
-    :value="item.value">
-  </el-option>
-</el-select>
+  <el-select v-model="value">
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -157,13 +161,11 @@
   }
 </script>
 ```
+:::
 
-## 有禁用选项
-
-<el-select v-model="value2">
-  <el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
-</el-select>
+### 有禁用选项
 
+:::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项
 ```html
 <template>
   <el-select v-model="value2">
@@ -203,24 +205,24 @@
   }
 </script>
 ```
+:::
 
-## 可清空单选
+### 禁用状态
 
-<el-select v-model="value3" clearable>
-  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
-</el-select>
+选择器不可用状态
 
+:::demo 为`el-select`设置`disabled`属性，则整个选择器不可用
 ```html
 <template>
-<el-select v-model="value3" clearable>
-  <el-option
-    v-for="item in options"
-    :label="item.label"
-    :value="item.value">
-  </el-option>
-</el-select>
+  <el-select v-model="value3" disabled>
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
-
+  
 <script>
   export default {
     data() {
@@ -247,16 +249,16 @@
   }
 </script>
 ```
+:::
 
-## 可搜索
+### 可清空单选
 
-<el-select v-model="value4" filterable>
-  <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
-</el-select>
+包含清空按钮，可将选择器清空为初始状态
 
+:::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅使用于单选。
 ```html
 <template>
-  <el-select v-model="value4" filterable>
+  <el-select v-model="value4" clearable>
     <el-option
       v-for="item in options"
       :label="item.label"
@@ -291,28 +293,21 @@
   }
 </script>
 ```
+:::
 
-## 分组
+### 基础多选
 
-<el-select v-model="value5">
-  <el-option-group v-for="group in options3" :label="group.label">
-    <el-option v-for="item in group.options" :label="item.label" :value="item.value">
-      <span style="float: left">{{ item.label }}</span>
-      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
-    </el-option>
-  </el-option-group>
-</el-select>
+适用性较广的基础多选，用 Tag 展示已选项
 
+:::demo 为`el-select`设置`nultiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
 ```html
 <template>
-  <el-select v-model="value5">
-    <el-option-group v-for="group in options3" :label="group.label">
-      <el-option
-        v-for="item in group.options"
-        :label="item.label"
-        :value="item.value">
-      </el-option>
-    </el-option-group>
+  <el-select v-model="value5" multiple>
+    <el-option
+      v-for="item in options"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
   </el-select>
 </template>
 
@@ -320,50 +315,35 @@
   export default {
     data() {
       return {
-        options3: [{
-          label: '热门城市',
-          options: [{
-            value: 'Shanghai',
-            label: '上海'
-          }, {
-            value: 'Beijing',
-            label: '北京'
-          }]
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
         }, {
-          label: '城市名',
-          options: [{
-            value: 'Chengdu',
-            label: '成都'
-          }, {
-            value: 'Shenzhen',
-            label: '深圳'
-          }, {
-            value: 'Guangzhou',
-            label: '广州'
-          }, {
-            value: 'Dalian',
-            label: '大连'
-          }]
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
         }],
-        value9: ''
+        value5: []
       }
     }
   }
 </script>
 ```
+:::
 
-## 自定义模板
+### 自定义模板
 
-<el-select v-model="value6">
-  <el-option
-    v-for="item in cities"
-    :label="item.label"
-    :value="item.value">
-    <span style="float: left">{{ item.label }}</span>
-    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
-  </el-option>
-</el-select>
+可以自定义备选项
 
+:::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
 ```html
 <template>
   <el-select v-model="value6">
@@ -406,20 +386,73 @@
   }
 </script>
 ```
+:::
 
-## 基础多选
+### 分组
 
-<el-select v-model="value7" multiple>
-  <el-option
-    v-for="item in options"
-    :label="item.label"
-    :value="item.value">
-  </el-option>
-</el-select>
+备选项进行分组展示
 
+:::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名
 ```html
 <template>
-  <el-select v-model="value7" multiple>
+  <el-select v-model="value7">
+    <el-option-group
+      v-for="group in options3"
+      :label="group.label">
+      <el-option
+        v-for="item in group.options"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options3: [{
+          label: '热门城市',
+          options: [{
+            value: 'Shanghai',
+            label: '上海'
+          }, {
+            value: 'Beijing',
+            label: '北京'
+          }]
+        }, {
+          label: '城市名',
+          options: [{
+            value: 'Chengdu',
+            label: '成都'
+          }, {
+            value: 'Shenzhen',
+            label: '深圳'
+          }, {
+            value: 'Guangzhou',
+            label: '广州'
+          }, {
+            value: 'Dalian',
+            label: '大连'
+          }]
+        }],
+        value7: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 可搜索
+
+可以利用搜索功能快速查找选项
+
+:::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
+```html
+<template>
+  <el-select v-model="value8" filterable>
     <el-option
       v-for="item in options"
       :label="item.label"
@@ -448,23 +481,23 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value7: []
+        value8: ''
       }
     }
   }
 </script>
 ```
+:::
 
-## 服务端搜索
+### 远程搜索
 
-<el-select v-model="value8" multiple filterable remote :remote-method="remoteMethod" :loading="loading" placeholder="请输入关键词">
-  <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value"></el-option>
-</el-select>
+从服务器搜索数据，输入关键字进行查找
 
+:::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。
 ```html
 <template>
   <el-select
-    v-model="value8"
+    v-model="value9"
     multiple
     filterable
     remote
@@ -485,14 +518,32 @@
     data() {
       return {
         options4: [],
-        value8: [],
+        value9: [],
         list: [],
         loading: false,
-        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
+        states: ["Alabama", "Alaska", "Arizona",
+        "Arkansas", "California", "Colorado",
+        "Connecticut", "Delaware", "Florida",
+        "Georgia", "Hawaii", "Idaho", "Illinois",
+        "Indiana", "Iowa", "Kansas", "Kentucky",
+        "Louisiana", "Maine", "Maryland",
+        "Massachusetts", "Michigan", "Minnesota",
+        "Mississippi", "Missouri", "Montana",
+        "Nebraska", "Nevada", "New Hampshire",
+        "New Jersey", "New Mexico", "New York",
+        "North Carolina", "North Dakota", "Ohio",
+        "Oklahoma", "Oregon", "Pennsylvania",
+        "Rhode Island", "South Carolina",
+        "South Dakota", "Tennessee", "Texas",
+        "Utah", "Vermont", "Virginia",
+        "Washington", "West Virginia", "Wisconsin",
+        "Wyoming"]
       }
     },
     mounted() {
-      this.list = this.states.map(item => { return { value: item, label: item }; });
+      this.list = this.states.map(item => {
+        return { value: item, label: item };
+      });
     },
     methods: {
       remoteMethod(query) {
@@ -500,7 +551,10 @@
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
+            this.options4 = this.list.filter(item => {
+              return item.label.toLowerCase()
+                .indexOf(query.toLowerCase()) > -1;
+            });
           }, 200);
         } else {
           this.options4 = [];
@@ -510,40 +564,38 @@
   }
 </script>
 ```
+:::
 
-## API
-### el-select
+### Select Attributes 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value | select 目前选中的值 | string/number/array | | |
-| multiple | 是否多选 | boolean | | false |
-| disabled | 是否禁用 | boolean | | false |
-| clearable | 单选时是否可以清空选项 | boolean | | false |
-| width | select 的宽度 | number | | 180（单选）/220（多选） |
-| dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | | |
-| name | select input 的 name 属性 | string | | |
-| placeholder | 占位符 | string | | '请选择' |
-| filterable | 是否可搜索 | boolean | | false |
-| filter-method | 自定义过滤方法 | function | |  |
-| remote | 是否为远程搜索 | boolean | | false |
-| remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | |
-| loading | 是否正在从远程获取数据 | boolean | | false |
-
-### el-select 事件
+| multiple | 是否多选 | boolean | - | false |
+| disabled | 是否禁用 | boolean | - | false |
+| clearable | 单选时是否可以清空选项 | boolean | - | false |
+| width | select 的宽度 | number | - | 180（单选）/220（多选） |
+| dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | - | - |
+| name | select input 的 name 属性 | string | - | - |
+| placeholder | 占位符 | string | - | '请选择' |
+| filterable | 是否可搜索 | boolean | - | false |
+| filter-method | 自定义过滤方法 | function | - | - |
+| remote | 是否为远程搜索 | boolean | - | false |
+| remote-method | 远程搜索方法 | function | | - |
+| loading | 是否正在从远程获取数据 | boolean | - | false |
+
+### Select Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
-| change | value 发生变化| `value` |
+| change | 选中值发生变化时触发 | 目前的选中值 |
 
-### el-option-group
+### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| label | 分组的标签 | string | | |
-| disabled | 是否将该分组下所有选项置为禁用 | boolean | | false |
+| label | 分组的组名 | string | - | - |
+| disabled | 是否将该分组下所有选项置为禁用 | boolean | - | false |
 
-### el-option
+### Option Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value | 选项的值 | string/number | | |
-| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | | |
-| disabled | 是否禁用该选项 | boolean | | false |
-| selected | 选项是否被初始选中 | boolean | | false |
+| value | 选项的值 | string/number/object | - | - |
+| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | - | - |
+| disabled | 是否禁用该选项 | boolean | - | false |

examples/docs/table.md

@@ -40,37 +40,30 @@
           $positive: true
         }],
         tableData3: [{
-          tag: '家',
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
-          tag: '公司',
           date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
-          tag: '公司',
           date: '2016-05-04',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
-          tag: '家',
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
-          tag: '公司',
           date: '2016-05-08',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
-          tag: '家',
           date: '2016-05-06',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }, {
-          tag: '公司',
           date: '2016-05-07',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
@@ -106,70 +99,90 @@
   };
 </script>
 
-## 基础表格
+## Table 表格
 
-在 Table 组件中，只要在`el-table`元素中注入`data`对象数组后在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。
+用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
 
-在下例中，我们还用了`width`属性来定义列宽：
+### 基础表格
 
-<el-table :data="tableData" style="width: 520px">
-  <el-table-column property="date" label="日期" width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
-</el-table>
+基础的表格展示用法
 
+:::demo 当`el-table`元素中注入`data`对象数组后，在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。
 ```html
-<template>
-  <el-table :data="tableData">
-    <el-table-column property="date" label="日期" width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
-  </el-table>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+  <template>
+    <el-table
+      :data="tableData"
+      style="width: 520px">
+      <el-table-column
+        property="date"
+        label="日期"
+        width="120">
+      </el-table-column>
+      <el-table-column
+        property="name"
+        label="姓名"
+        width="120">
+      </el-table-column>
+      <el-table-column
+        property="address"
+        label="地址">
+      </el-table-column>
+    </el-table>
+  </template>
+  
+  <script>
+    export default {
+      data() {
+        return {
+          tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+        }
       }
     }
-  }
-</script>
+  </script>
 ```
+:::
 
-## 带斑马纹表格
+### 带斑马纹表格
 
-`stripe`属性可以创建带斑马纹的表格，效果如下例，它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
-
-<el-table :data="tableData" stripe style="width: 520px">
-  <el-table-column property="date" label="日期" width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
-</el-table>
+使用带斑马纹的表格，可以更容易区分出不同行的数据
 
+:::demo `stripe`属性可以创建带斑马纹的表格。它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
 ```html
 <template>
-  <el-table :data="tableData" stripe>
-    <el-table-column property="date" label="日期" width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+  <el-table
+    :data="tableData"
+    stripe
+    style="width: 520px">
+    <el-table-column
+      property="date"
+      label="日期"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -199,23 +212,31 @@
   }
 </script>
 ```
+:::
 
-## 带边框表格
-
-默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
-
-<el-table :data="tableData" border style="width: 520px">
-  <el-table-column property="date" label="日期" width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
-</el-table>
+### 带边框表格
 
+:::demo 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
 ```html
 <template>
-  <el-table :data="tableData" border>
-    <el-table-column property="date" label="日期" width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 520px">
+    <el-table-column
+      property="date"
+      label="日期"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -245,23 +266,34 @@
   }
 </script>
 ```
+:::
 
-## 带状态表格
+### 带状态表格
 
-可以为行添加自定义背景色，表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`，则为该行添加`custom-background-colors`数组中对应的背景色。
-
-<el-table :data="tableData2" style="width: 520px" :custom-criteria="['$info', '$positive']" :custom-background-colors="['#C9E5F5', '#E2F0E4']">
-  <el-table-column property="date" label="日期" width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
-</el-table>
+可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容
 
+:::demo 为行添加自定义背景色，表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`，则为该行添加`custom-background-colors`数组中对应的背景色。
 ```html
 <template>
-  <el-table :data="tableData2" :custom-criteria="['$info', '$positive']" :custom-background-colors="['#C9E5F5', '#E2F0E4']">
-    <el-table-column property="date" label="日期" width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+  <el-table
+    :data="tableData2"
+    style="width: 520px"
+    :custom-criteria="['$info', '$positive']"
+    :custom-background-colors="['#C9E5F5', '#E2F0E4']">
+    <el-table-column
+      property="date"
+      label="日期"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address" 
+      label="地址">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -293,23 +325,34 @@
   }
 </script>
 ```
+:::
 
-## 固定表头
-
-只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码，下例是一个固定表头的表格：
+### 固定表头
 
-<el-table :data="tableData3" height="250" border style="width: 520px">
-  <el-table-column property="date" label="日期" width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
-</el-table>
+纵向内容过多时，可选择固定表头
 
+:::demo 只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。
 ```html
 <template>
-  <el-table :data="tableData3" height="250" border>
-    <el-table-column property="date" label="日期" width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+  <el-table 
+    :data="tableData3"
+    height="250"
+    border
+    style="width: 520px">
+    <el-table-column
+      property="date"
+      label="日期"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -351,22 +394,35 @@
   }
 </script>
 ```
+:::
 
-## 固定列
-除了固定头以外，固定列也十分方便，只需要使用`fixed-column-count`属性即可，它接受一个`Number`，表示左起要固定的列数，下例展示了如何使用：
+### 固定列
 
-<el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
-  <el-table-column property="date" label="日期" width="150"></el-table-column>
-  <el-table-column property="name" label="姓名" width="300"></el-table-column>
-  <el-table-column property="address" label="地址" width="300"></el-table-column>
-</el-table>
+横向内容过多时，可选择固定首列
 
+:::demo 固定列需要使用`fixed-column-count`属性，它接受一个`Number`，表示左起要固定的列数。
 ```html
 <template>
-  <el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
-    <el-table-column property="date" label="日期" width="150"></el-table-column>
-    <el-table-column property="name" label="姓名" width="300"></el-table-column>
-    <el-table-column property="address" label="地址" width="300"></el-table-column>
+  <el-table
+    :data="tableData"
+    :fixed-column-count="1"
+    border
+    style="width: 500px">
+    <el-table-column
+      property="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址"
+      width="300">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -396,23 +452,36 @@
   }
 </script>
 ```
+:::
 
-## 固定列和表头
-
-固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可，下例是一个联用的样例：
+### 固定列和表头
 
-<el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
-  <el-table-column property="date" label="日期" width="150"></el-table-column>
-  <el-table-column property="name" label="姓名" width="300"></el-table-column>
-  <el-table-column property="address" label="地址" width="300"></el-table-column>
-</el-table>
+横纵内容过多时，可选择固定列和表头
 
+:::demo 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
 ```html
 <template>
-  <el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
-    <el-table-column property="date" label="日期" width="150"></el-table-column>
-    <el-table-column property="name" label="姓名" width="300"></el-table-column>
-    <el-table-column property="address" label="地址" width="300"></el-table-column>
+  <el-table
+    :data="tableData3"
+    :fixed-column-count="1"
+    border
+    style="width: 500px"
+    height="250">
+    <el-table-column
+      property="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址"
+      width="300">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -454,31 +523,39 @@
   }
 </script>
 ```
+:::
 
-## 单选
-
-更方便的是，Table 组件默认提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`即可。
-
-之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。
-
-在下例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。
+### 单选
 
-如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
-
-<el-table :data="tableData" selection-mode="single" @selectionchange="handleSelectionChange" style="width: 520px" allow-no-selection>
-  <el-table-column type="index" width="50"></el-table-column>
-  <el-table-column property="date" label="日期" width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址"></el-table-column>
-</el-table>
-<p>{{ singleSelection }}</p>
+选择单行数据时使用色块表示
 
+:::demo Table 组件提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`。之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。本例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，若为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
 ```html
 <template>
-  <el-table :data="tableData" selection-mode="single" @selectionchange="handleSelectionChange">
-    <el-table-column property="date" label="日期" width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址"></el-table-column>
+  <el-table
+    :data="tableData"
+    selection-mode="single"
+    @selectionchange="handleSelectionChange"
+    style="width: 520px"
+    allow-no-selection>
+    <el-table-column
+      type="index"
+      width="50">
+    </el-table-column>
+    <el-table-column
+      property="date"
+      label="日期"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -515,36 +592,40 @@
   }
 </script>
 ```
+:::
 
-## 多选
-
-除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`的事件中，我们提供的参数从对象变成了对象数组。
-
-此外，需要提供一个栏目来显示多选框，手动添加一列，设`type`属性为`selection`即可。
-
-在下例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。
-
-而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。
+### 多选
 
-<el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
-  <el-table-column type="selection" width="50"></el-table-column>
-  <el-table-column inline-template label="日期" width="120">
-    <div>{{ row.date }}</div>
-  </el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
-</el-table>
-<p>{{ multipleSelection }}</p>
+选择多行数据时使用 Checkbox
 
+:::demo 除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外，需要提供一个列来显示多选框: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。
 ```html
 <template>
-  <el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
-    <el-table-column type="selection" width="50"></el-table-column>
-    <el-table-column inline-template label="日期" width="120">
+  <el-table
+    :data="tableData3"
+    selection-mode="multiple"
+    style="width: 420px"
+    @selectionchange="handleMultipleSelectionChange">
+    <el-table-column
+      type="selection"
+      width="50">
+    </el-table-column>
+    <el-table-column
+      inline-template
+      label="日期"
+      width="120">
       <div>{{ row.date }}</div>
     </el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址"
+      show-tooltip-when-overflow>
+    </el-table-column>
   </el-table>
 </template>
 
@@ -593,25 +674,35 @@
   }
 </script>
 ```
+:::
 
-## 排序
-
-Table 组件中，只要在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。
+### 排序
 
-在下例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
-
-<el-table :data="tableData" border style="width: 520px">
-  <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
-  <el-table-column property="name" label="姓名" width="120"></el-table-column>
-  <el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
-</el-table>
+对表格进行排序，可快速查找或对比数据
 
+:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
 ```html
 <template>
-  <el-table :data="tableData" border style="width: 520px">
-    <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
-    <el-table-column property="name" label="姓名" width="120"></el-table-column>
-    <el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 520px">
+    <el-table-column
+      property="date"
+      label="日期"
+      sortable
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="地址"
+      :formatter="formatter">
+    </el-table-column>
   </el-table>
 </template>
 
@@ -646,19 +737,20 @@ Table 组件中，只要在列中设置`sortable`属性即可实现以该列为
   }
 </script>
 ```
+:::
 
-## Table Attributes
+### Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | 显示的数据 | array | | |
-| height | table 的高度，默认高度为空，即自动高度 | string | | '' |
-| stripe | 是否为斑马纹 table | boolean | | false |
-| border | 是否带有纵向边框 | boolean | | false |
-| selection-mode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
-| allow-no-selection | 单选模式是否允许选项为空 | boolean | | false |
-| fixed-column-count | 固定列的个数 | number | | 0 |
-
-## Table Events
+| data | 显示的数据 | array | - | - |
+| height | table 的高度，默认高度为空，即自动高度 | string | - | - |
+| stripe | 是否为斑马纹 table | boolean | - | false |
+| border | 是否带有纵向边框 | boolean | - | false |
+| selection-mode | 列表项选择模式 | string | single/multiple/none | none |
+| allow-no-selection | 单选模式是否允许选项为空 | boolean | - | false |
+| fixed-column-count | 固定列的个数 | number | - | 0 |
+
+### Table Events
 | 事件名 | 说明 | 参数 |
 | ---- | ---- | ---- |
 | selectionchange | 当选择项发生变化时会触发该事件 | selected |
@@ -666,15 +758,15 @@ Table 组件中，只要在列中设置`sortable`属性即可实现以该列为
 | cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 
-## Table-column Attributes
+### Table-column Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| label | 显示的标题 | string | | '' |
-| property | 对应列内容的字段名 | string | | '' |
-| width | 对应列的宽度 | string | | |
-| sortable | 对应列是否可以排序 | boolean | | false |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选按钮，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | 'selection', 'index' | 0 |
-| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | |  |
-| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false |
-| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，通过 _self 获取当前上下文。此时不需要配置 property 属性  | | |
+| label | 显示的标题 | string | - | - |
+| property | 对应列内容的字段名 | string | - | - |
+| width | 对应列的宽度 | string | - | - |
+| sortable | 对应列是否可以排序 | boolean | - | false |
+| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | - |
+| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | - | - |
+| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | - | false |
+| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，通过 _self 获取当前上下文。此时不需要配置 property 属性  | - | - |
 

examples/nav.config.json

@@ -116,13 +116,13 @@
         {
           "path": "/date-picker",
           "name": "日期选择器（date-picker）",
-          "title": "Date Picker",
+          "title": "Date Picker 日期选择器",
           "description": "用于选择或输入时间"
         },
         {
           "path": "/datetime-picker",
           "name": "日期时间选择器",
-          "title": "Datetime Picker",
+          "title": "Datetime Picker 日期时间选择器",
           "description": "用于选择或输入日期时间"
         },
         {

packages/select/src/select.vue

@@ -266,6 +266,7 @@
             this.selected = {};
           }
           this.remoteMethod(val);
+          this.voidRemoteQuery = val === '';
         } else if (typeof this.filterMethod === 'function') {
           this.filterMethod(val);
         } else {
@@ -294,9 +295,6 @@
             }
           }
         } else {
-          if (this.remote) {
-            this.voidRemoteQuery = true;
-          }
           if (this.$el.querySelector('.el-input__icon')) {
             this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
           }
@@ -519,6 +517,9 @@
         this.selectedInit = true;
         this.selected = [];
       }
+      if (this.remote) {
+        this.voidRemoteQuery = true;
+      }
 
       this.debouncedOnInputChange = debounce(this.debounce, () => {
         this.onInputChange();