mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 04:08:10 +08:00
Docs:rename variable name (#15003)
This commit is contained in:
刘鹏龙
hetech
parent
88b628bd04
commit
87929cc996
@ -70,7 +70,7 @@ You can customize loading text, loading spinner and background color.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
v-loading="loading"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
@ -110,7 +110,7 @@ You can customize loading text, loading spinner and background color.
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading2: true
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -134,7 +134,7 @@ Show a full screen animation while loading data.
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
@click="openFullScreen">
|
||||
As a service
|
||||
</el-button>
|
||||
</template>
|
||||
@ -153,7 +153,7 @@ Show a full screen animation while loading data.
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
openFullScreen() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
@ -44,13 +44,13 @@ Confirm is used to ask users' confirmation.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open2">Click to open the Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
open() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
@ -82,13 +82,13 @@ Prompt is used when user input is required.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open3">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open() {
|
||||
this.$prompt('Please input your e-mail', 'Tip', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
@ -120,13 +120,13 @@ Can be customized to show various content.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open4">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
@ -176,13 +176,13 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open5">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open() {
|
||||
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
@ -205,13 +205,13 @@ In some cases, clicking the cancel button and close button may have different me
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open6">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
open() {
|
||||
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: 'Save',
|
||||
@ -245,13 +245,13 @@ Content of MessageBox can be centered.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open7">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
|
||||
@ -32,15 +32,15 @@ Radio should not have too many options. Otherwise, use the Select component inst
|
||||
:::demo You just need to add the `disabled` attribute.
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
|
||||
<el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'selected and disabled'
|
||||
radio: 'selected and disabled'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@ Suitable for choosing from some mutually exclusive options.
|
||||
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
@ -65,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
radio: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -81,7 +81,7 @@ Radio with button styles.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -89,7 +89,7 @@ Radio with button styles.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-group v-model="radio2" size="medium">
|
||||
<el-radio-button label="New York" ></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -97,7 +97,7 @@ Radio with button styles.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" disabled ></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -105,7 +105,7 @@ Radio with button styles.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-group v-model="radio4" disabled size="mini">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -118,10 +118,10 @@ Radio with button styles.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'New York',
|
||||
radio2: 'New York',
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York',
|
||||
radio6: 'New York'
|
||||
radio4: 'New York'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -135,21 +135,21 @@ Radio with button styles.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
|
||||
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
|
||||
<el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border disabled>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio-group v-model="radio4" size="mini" disabled>
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
@ -160,10 +160,10 @@ Radio with button styles.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
radio1: '1',
|
||||
radio2: '1',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ Using text to indicate rating score
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text>
|
||||
</el-rate>
|
||||
@ -49,7 +49,7 @@ Using text to indicate rating score
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -65,7 +65,7 @@ You can use different icons to distinguish different rate components.
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
v-model="value"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
@ -75,7 +75,7 @@ You can use different icons to distinguish different rate components.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -91,7 +91,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
@ -102,7 +102,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
value: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,9 +52,9 @@ When there are plenty of options, use a drop-down menu to display and select des
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -67,7 +67,7 @@ When there are plenty of options, use a drop-down menu to display and select des
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
@ -84,7 +84,7 @@ When there are plenty of options, use a drop-down menu to display and select des
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value2: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -99,7 +99,7 @@ Disable the whole component.
|
||||
:::demo Set `disabled` of `el-select` to make it disabled.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
<el-select v-model="value" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -129,7 +129,7 @@ Disable the whole component.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value3: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -144,7 +144,7 @@ You can clear Select using a clear icon.
|
||||
:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
<el-select v-model="value" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -174,7 +174,7 @@ You can clear Select using a clear icon.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value4: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -250,7 +250,7 @@ You can customize HTML templates for options.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
@ -285,7 +285,7 @@ You can customize HTML templates for options.
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value6: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -301,9 +301,9 @@ Display options in groups.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
v-for="group in options"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
@ -320,7 +320,7 @@ Display options in groups.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
options: [{
|
||||
label: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
@ -345,7 +345,7 @@ Display options in groups.
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -360,7 +360,7 @@ You can filter options for your desired ones.
|
||||
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
<el-select v-model="value" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -390,7 +390,7 @@ You can filter options for your desired ones.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value8: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -407,7 +407,7 @@ Enter keywords and search data from server.
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
@ -416,7 +416,7 @@ Enter keywords and search data from server.
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -428,8 +428,8 @@ Enter keywords and search data from server.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
options: [],
|
||||
value: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
@ -462,13 +462,13 @@ Enter keywords and search data from server.
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
this.options = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -483,14 +483,14 @@ Create and select new items that are not included in select options
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value10"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="Choose tags for your article">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -502,7 +502,7 @@ Create and select new items that are not included in select options
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [{
|
||||
options: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
@ -512,7 +512,7 @@ Create and select new items that are not included in select options
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value10: []
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
v-loading="loading"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
@ -110,7 +110,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading2: true
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -134,7 +134,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
@click="openFullScreen">
|
||||
Como servicio
|
||||
</el-button>
|
||||
</template>
|
||||
@ -153,7 +153,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
openFullScreen() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
@ -45,13 +45,13 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open2">Click to open the Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
open() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
@ -83,13 +83,13 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open3">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open() {
|
||||
this.$prompt('Please input your e-mail', 'Tip', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
@ -121,13 +121,13 @@ Puede ser personalizado para mostrar diversos contenidos.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open4">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
@ -179,13 +179,13 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open5">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open() {
|
||||
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
@ -209,13 +209,13 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open6">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
open() {
|
||||
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: 'Save',
|
||||
@ -249,13 +249,13 @@ El contenido del componente MessageBox puede ser centrado.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open7">Click to open Message Box</el-button>
|
||||
<el-button type="text" @click="open">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
|
||||
@ -30,15 +30,15 @@ El atributo `disabled` es utilizado para deshabilitar un Radio.
|
||||
:::demo Solo necesita agregar el atributo `disabled`.
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
|
||||
<el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'selected and disabled'
|
||||
radio: 'selected and disabled'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -53,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
|
||||
:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
@ -63,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
radio: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -79,7 +79,7 @@ Radio con estilo de botón.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -87,7 +87,7 @@ Radio con estilo de botón.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-group v-model="radio2" size="medium">
|
||||
<el-radio-button label="New York" ></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -95,7 +95,7 @@ Radio con estilo de botón.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" disabled ></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -103,7 +103,7 @@ Radio con estilo de botón.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-group v-model="radio4" disabled size="mini">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -116,10 +116,10 @@ Radio con estilo de botón.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'New York',
|
||||
radio2: 'New York',
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York',
|
||||
radio6: 'New York'
|
||||
radio4: 'New York'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -133,21 +133,21 @@ Radio con estilo de botón.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
|
||||
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
|
||||
<el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border disabled>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio-group v-model="radio4" size="mini" disabled>
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
@ -158,10 +158,10 @@ Radio con estilo de botón.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
radio1: '1',
|
||||
radio2: '1',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ Usa texto para indicar la puntuación
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text>
|
||||
</el-rate>
|
||||
@ -50,7 +50,7 @@ Usa texto para indicar la puntuación
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,7 +66,7 @@ Puede utilizar iconos para diferenciar cada componente.
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
v-model="value"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
@ -76,7 +76,7 @@ Puede utilizar iconos para diferenciar cada componente.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -92,7 +92,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
@ -103,7 +103,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
value: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,9 +52,9 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -67,7 +67,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
@ -84,7 +84,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value2: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -100,7 +100,7 @@ Desactivar todo el componente.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
<el-select v-model="value" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -130,7 +130,7 @@ Desactivar todo el componente.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value3: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -146,7 +146,7 @@ Puede limpiar un Select con un icono.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
<el-select v-model="value" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -176,7 +176,7 @@ Puede limpiar un Select con un icono.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value4: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -236,7 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: []
|
||||
value5: [],
|
||||
value11: []
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -252,7 +253,7 @@ Puede personalizar templates HTML para las opciones.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
@ -287,7 +288,7 @@ Puede personalizar templates HTML para las opciones.
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value6: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -303,9 +304,9 @@ Mostrar opciones en grupos.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
v-for="group in options"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
@ -322,7 +323,7 @@ Mostrar opciones en grupos.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
options: [{
|
||||
label: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
@ -347,7 +348,7 @@ Mostrar opciones en grupos.
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -363,7 +364,7 @@ Puede filtrar opciones como lo desee.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
<el-select v-model="value" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -393,7 +394,7 @@ Puede filtrar opciones como lo desee.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value8: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -410,7 +411,7 @@ Introduzca palabras y datos para buscar desde el servidor.
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
@ -419,7 +420,7 @@ Introduzca palabras y datos para buscar desde el servidor.
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -431,8 +432,8 @@ Introduzca palabras y datos para buscar desde el servidor.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
options: [],
|
||||
value: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
@ -465,13 +466,13 @@ Introduzca palabras y datos para buscar desde el servidor.
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
this.options = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -488,13 +489,13 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value10"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
placeholder="Choose tags for your article">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -506,7 +507,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [{
|
||||
options: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
@ -516,7 +517,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value10: []
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
v-loading="loading"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
@ -110,7 +110,7 @@ Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading2: true
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -134,7 +134,7 @@ Affichez une animation en plein écran quand vous charger des données.
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
@click="openFullScreen">
|
||||
Comme service
|
||||
</el-button>
|
||||
</template>
|
||||
@ -153,7 +153,7 @@ Affichez une animation en plein écran quand vous charger des données.
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
openFullScreen() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
@ -45,13 +45,13 @@ Confirm est utilisé pour demander une confirmation à l'utilisateur.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open2">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
open() {
|
||||
this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Annuler',
|
||||
@ -83,13 +83,13 @@ Prompt est utilisé lorsqu'un utilisateur.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open3">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open() {
|
||||
this.$prompt('Entrez votre e-mail', 'Astuce', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Annuler',
|
||||
@ -121,13 +121,13 @@ Il est possible d'afficher du contenu un peu plus varié et personnalisé.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open4">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
@ -177,13 +177,13 @@ Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des compo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open5">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open() {
|
||||
this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
@ -206,13 +206,13 @@ Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différe
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open6">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
open() {
|
||||
this.$confirm('Vous avez du travail non-enregistré, enregistrer et quitter?', 'Confirm', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: 'Enregistrer',
|
||||
@ -247,13 +247,13 @@ le contenu de MessageBox peut être centré.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open7">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
<el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open() {
|
||||
this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Annuler',
|
||||
|
||||
@ -32,15 +32,15 @@ L'attribut `disabled` désactive le radio.
|
||||
:::demo Ajoutez simplement l'attribut `disabled` au radio.
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
|
||||
<el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'selected and disabled'
|
||||
radio: 'selected and disabled'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
|
||||
:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
@ -65,7 +65,7 @@ Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
radio: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -81,7 +81,7 @@ Des radios affichés comme des boutons standards.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -89,7 +89,7 @@ Des radios affichés comme des boutons standards.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-group v-model="radio2" size="medium">
|
||||
<el-radio-button label="New York" ></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -97,7 +97,7 @@ Des radios affichés comme des boutons standards.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" disabled ></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -105,7 +105,7 @@ Des radios affichés comme des boutons standards.
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-group v-model="radio4" disabled size="mini">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
@ -118,10 +118,10 @@ Des radios affichés comme des boutons standards.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'New York',
|
||||
radio2: 'New York',
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York',
|
||||
radio6: 'New York'
|
||||
radio4: 'New York'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -135,21 +135,21 @@ Des radios affichés comme des boutons standards.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
|
||||
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
|
||||
<el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border disabled>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio-group v-model="radio4" size="mini" disabled>
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
@ -160,10 +160,10 @@ Des radios affichés comme des boutons standards.
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
radio1: '1',
|
||||
radio2: '1',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ Vous pouvez ajouter du texte à chaque score.
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text>
|
||||
</el-rate>
|
||||
@ -49,7 +49,7 @@ Vous pouvez ajouter du texte à chaque score.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -65,7 +65,7 @@ Vous pouvez utiliser différentes icônes pour chaque
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
v-model="value"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
@ -75,7 +75,7 @@ Vous pouvez utiliser différentes icônes pour chaque
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -91,7 +91,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
|
||||
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
@ -102,7 +102,7 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
value: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,9 +52,9 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -67,7 +67,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
@ -84,7 +84,7 @@ Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché gr
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value2: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -99,7 +99,7 @@ Vous pouvez désactiver le composant lui-même.
|
||||
:::demo Ajoutez `disabled` à `el-select` pour le désactiver.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
<el-select v-model="value" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -129,7 +129,7 @@ Vous pouvez désactiver le composant lui-même.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value3: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -144,7 +144,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
|
||||
:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
<el-select v-model="value" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -174,7 +174,7 @@ Vous pouvez ajouter un bouton pour effacer la sélection.
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value4: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -250,7 +250,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
@ -285,7 +285,7 @@ Vous pouvez définir un template HTML pour l'affichage des options.
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value6: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -301,9 +301,9 @@ Vous pouvez définir des groupes pour les options du menu.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7" placeholder="Select">
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
v-for="group in options"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
@ -320,7 +320,7 @@ Vous pouvez définir des groupes pour les options du menu.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
options: [{
|
||||
label: 'Villes célèbres',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
@ -345,7 +345,7 @@ Vous pouvez définir des groupes pour les options du menu.
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -360,7 +360,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
|
||||
:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
<el-select v-model="value" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -390,7 +390,7 @@ Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value8: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -407,7 +407,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
@ -416,7 +416,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -428,8 +428,8 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
options: [],
|
||||
value: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
@ -462,13 +462,13 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
this.options = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -485,14 +485,14 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value10"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="Choisissez les tags de vos articles">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -504,7 +504,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [{
|
||||
options: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
@ -514,7 +514,7 @@ Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluse
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value10: []
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
@ -109,7 +109,7 @@
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading2: true
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -133,7 +133,7 @@
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
@click="openFullScreen">
|
||||
服务方式
|
||||
</el-button>
|
||||
</template>
|
||||
@ -152,7 +152,7 @@
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
openFullScreen() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
@ -43,13 +43,13 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open2">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
open() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -80,13 +80,13 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
open() {
|
||||
this.$prompt('请输入邮箱', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -118,13 +118,13 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open4">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
@ -174,13 +174,13 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open5">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
open() {
|
||||
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
@ -203,13 +203,13 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open6">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
open() {
|
||||
this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: '保存',
|
||||
@ -243,13 +243,13 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open7">点击打开 Message Box</el-button>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
open() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
||||
@ -33,15 +33,15 @@
|
||||
:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
|
||||
<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
|
||||
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: '选中且禁用'
|
||||
radio: '选中且禁用'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="3">备选项</el-radio>
|
||||
<el-radio :label="6">备选项</el-radio>
|
||||
<el-radio :label="9">备选项</el-radio>
|
||||
@ -68,7 +68,7 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
radio: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -84,7 +84,7 @@
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
@ -92,7 +92,7 @@
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-group v-model="radio2" size="medium">
|
||||
<el-radio-button label="上海" ></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
@ -100,7 +100,7 @@
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京" disabled ></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
@ -108,7 +108,7 @@
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-group v-model="radio4" disabled size="mini">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
@ -121,10 +121,10 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: '上海',
|
||||
radio2: '上海',
|
||||
radio3: '上海',
|
||||
radio4: '上海',
|
||||
radio5: '上海',
|
||||
radio6: '上海'
|
||||
radio4: '上海'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -138,21 +138,21 @@
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>备选项1</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>备选项2</el-radio>
|
||||
<el-radio v-model="radio1" label="1" border>备选项1</el-radio>
|
||||
<el-radio v-model="radio1" label="2" border>备选项2</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
|
||||
<el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
|
||||
<el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio label="1" border>备选项1</el-radio>
|
||||
<el-radio label="2" border disabled>备选项2</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio-group v-model="radio4" size="mini" disabled>
|
||||
<el-radio label="1" border>备选项1</el-radio>
|
||||
<el-radio label="2" border>备选项2</el-radio>
|
||||
</el-radio-group>
|
||||
@ -163,10 +163,10 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
radio1: '1',
|
||||
radio2: '1',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
:::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
show-text>
|
||||
</el-rate>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -61,7 +61,7 @@
|
||||
:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
v-model="value"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
@ -71,7 +71,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -86,7 +86,7 @@
|
||||
:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
@ -97,7 +97,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
value: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,9 +51,9 @@
|
||||
:::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2" placeholder="请选择">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -66,7 +66,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
@ -83,7 +83,7 @@
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value2: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -98,7 +98,7 @@
|
||||
:::demo 为`el-select`设置`disabled`属性，则整个选择器不可用
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="请选择">
|
||||
<el-select v-model="value" disabled placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -128,7 +128,7 @@
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value3: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -143,7 +143,7 @@
|
||||
:::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="请选择">
|
||||
<el-select v-model="value" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -173,7 +173,7 @@
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value4: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -248,7 +248,7 @@
|
||||
:::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6" placeholder="请选择">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
@ -283,7 +283,7 @@
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value6: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -298,9 +298,9 @@
|
||||
:::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7" placeholder="请选择">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
v-for="group in options"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
@ -317,7 +317,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
options: [{
|
||||
label: '热门城市',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
@ -342,7 +342,7 @@
|
||||
label: '大连'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -357,7 +357,7 @@
|
||||
:::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="请选择">
|
||||
<el-select v-model="value" filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@ -387,7 +387,7 @@
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value8: ''
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -402,7 +402,7 @@
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
@ -411,7 +411,7 @@
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -423,8 +423,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
options: [],
|
||||
value: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
@ -457,13 +457,13 @@
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
this.options = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -478,14 +478,14 @@
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value10"
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="请选择文章标签">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -497,7 +497,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [{
|
||||
options: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
@ -507,7 +507,7 @@
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value10: []
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user