github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #111 from Leopoldthecoder/next 

Alert/Select/Notification/Table doc update
pull/2/head
FuryBean 2016-08-26 21:49:28 +08:00 committed by GitHub
parent a37c361eb4 ff9a5ba530
commit 7b860de92b
6 changed files with 577 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
examples/docs/alert.md
View File

@ -19,9 +19,13 @@
## Alert 警告 ## Alert 警告
用于页面中展示重要的提示信息。
### 基本用法 ### 基本用法
::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。 页面中的非浮层，不会自动消失
::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
```html ```html
<template> <template>
<el-alert <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 ```html
<template> <template>
<el-alert <el-alert
@ -80,7 +86,9 @@
### 带有 icon ### 带有 icon
::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。 表示某种状态时提升可读性
::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
```html ```html
<template> <template>
<el-alert <el-alert
@ -109,7 +117,9 @@
### 带有辅助性文字介绍 ### 带有辅助性文字介绍
::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。 包含标题和内容，解释更详细的警告
::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
```html ```html
<template> <template>
<el-alert <el-alert

213
examples/docs/notification.md
View File

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

310
examples/docs/select.md
View File

@ -85,10 +85,11 @@
value2: '', value2: '',
value3: '', value3: '',
value4: '', value4: '',
value5: '', value5: [],
value6: '', value6: '',
value7: [], value7: [],
value8: [], value8: '',
value9: [],
loading: false, 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"]
}; };
@ -114,21 +115,24 @@
}; };
</script> </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 ```html
<template> <template>
<el-select v-model="value"> <el-select v-model="value">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
<script> <script>
@ -157,13 +161,11 @@
} }
</script> </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 ```html
<template> <template>
<el-select v-model="value2"> <el-select v-model="value2">
@ -203,22 +205,22 @@
} }
</script> </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 ```html
<template> <template>
<el-select v-model="value3" clearable> <el-select v-model="value3" disabled>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
<script> <script>
@ -247,16 +249,16 @@
} }
</script> </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 ```html
<template> <template>
<el-select v-model="value4" filterable> <el-select v-model="value4" clearable>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -291,28 +293,21 @@
} }
</script> </script>
``` ```
:::
## 分组 ### 基础多选
<el-select v-model="value5"> 适用性较广的基础多选，用 Tag 展示已选项
<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>
:::demo 为`el-select`设置`nultiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
```html ```html
<template> <template>
<el-select v-model="value5"> <el-select v-model="value5" multiple>
<el-option-group v-for="group in options3" :label="group.label"> <el-option
<el-option v-for="item in options"
v-for="item in group.options" :label="item.label"
:label="item.label" :value="item.value">
:value="item.value"> </el-option>
</el-option>
</el-option-group>
</el-select> </el-select>
</template> </template>
@ -320,50 +315,35 @@
export default { export default {
data() { data() {
return { return {
options3: [{ options: [{
label: '热门城市', value: '选项1',
options: [{ label: '黄金糕'
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}]
}, { }, {
label: '城市名', value: '选项2',
options: [{ label: '双皮奶'
value: 'Chengdu', }, {
label: '成都' value: '选项3',
}, { label: '蚵仔煎'
value: 'Shenzhen', }, {
label: '深圳' value: '选项4',
}, { label: '龙须面'
value: 'Guangzhou', }, {
label: '广州' value: '选项5',
}, { label: '北京烤鸭'
value: 'Dalian',
label: '大连'
}]
}], }],
value9: '' value5: []
} }
} }
} }
</script> </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 ```html
<template> <template>
<el-select v-model="value6"> <el-select v-model="value6">
@ -406,20 +386,73 @@
} }
</script> </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 ```html
<template> <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 <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -448,23 +481,23 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value7: [] value8: ''
} }
} }
} }
</script> </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 ```html
<template> <template>
<el-select <el-select
v-model="value8" v-model="value9"
multiple multiple
filterable filterable
remote remote
@ -485,14 +518,32 @@
data() { data() {
return { return {
options4: [], options4: [],
value8: [], value9: [],
list: [], list: [],
loading: false, 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() { mounted() {
this.list = this.states.map(item => { return { value: item, label: item }; }); this.list = this.states.map(item => {
return { value: item, label: item };
});
}, },
methods: { methods: {
remoteMethod(query) { remoteMethod(query) {
@ -500,7 +551,10 @@
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; 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); }, 200);
} else { } else {
this.options4 = []; this.options4 = [];
@ -510,40 +564,38 @@
} }
</script> </script>
``` ```
:::
## API ### Select Attributes
### el-select
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| value | select 目前选中的值 | string/number/array | | | | multiple | 是否多选 | boolean | - | false |
| multiple | 是否多选 | boolean | | false | | disabled | 是否禁用 | boolean | - | false |
| disabled | 是否禁用 | boolean | | false | | clearable | 单选时是否可以清空选项 | boolean | - | false |
| clearable | 单选时是否可以清空选项 | boolean | | false | | width | select 的宽度 | number | - | 180（单选）/220（多选） |
| width | select 的宽度 | number | | 180（单选）/220（多选） | | dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | - | - |
| dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | | | | name | select input 的 name 属性 | string | - | - |
| name | select input 的 name 属性 | string | | | | placeholder | 占位符 | string | - | '请选择' |
| placeholder | 占位符 | string | | '请选择' | | filterable | 是否可搜索 | boolean | - | false |
| filterable | 是否可搜索 | boolean | | false | | filter-method | 自定义过滤方法 | function | - | - |
| filter-method | 自定义过滤方法 | function | | | | remote | 是否为远程搜索 | boolean | - | false |
| remote | 是否为远程搜索 | boolean | | false | | remote-method | 远程搜索方法 | function | | - |
| remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | | | loading | 是否正在从远程获取数据 | boolean | - | false |
| loading | 是否正在从远程获取数据 | boolean | | false |
### el-select 事件 ### Select Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------|---------|---------| |---------|---------|---------|
| change | value 发生变化| `value` | | change | 选中值发生变化时触发 | 目前的选中值 |
### el-option-group ### Option Group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 分组的标签 | string | | | | label | 分组的组名 | string | - | - |
| disabled | 是否将该分组下所有选项置为禁用 | boolean | | false | | disabled | 是否将该分组下所有选项置为禁用 | boolean | - | false |
### el-option ### Option Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 选项的值 | string/number | | | | value | 选项的值 | string/number/object | - | - |
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | | | | label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | - | - |
| disabled | 是否禁用该选项 | boolean | | false | | disabled | 是否禁用该选项 | boolean | - | false |
| selected | 选项是否被初始选中 | boolean | | false |

492
examples/docs/table.md
View File

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

4
examples/nav.config.json
View File

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

7
packages/select/src/select.vue
View File

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