mirror of https://github.com/ElemeFE/element
update dependencies
Leopoldthecoder
杨奕
parent
7c9ec6d19d
commit
45043754df
|
|
@ -118,6 +118,7 @@
|
|||
@input="handleDropdownToggle">
|
||||
<el-dropdown-item
|
||||
v-for="item in Object.keys(versions)"
|
||||
:key="item"
|
||||
@click.native="switchVersion(item)">
|
||||
{{ item }}
|
||||
</el-dropdown-item>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ Card includes title, content and operations.
|
|||
<span style="line-height: 36px;">Card name</span>
|
||||
<el-button style="float: right;" type="primary">Operation button</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" class="text item">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -97,7 +97,7 @@ The header part can be omitted.
|
|||
:::demo
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 4" class="text item">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -125,7 +125,7 @@ Display richer content by adding some configs.
|
|||
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Loop a series of images or texts in a limited space
|
|||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is hovered (default)</span>
|
||||
<el-carousel height="150px">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -30,7 +30,7 @@ Loop a series of images or texts in a limited space
|
|||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is clicked</span>
|
||||
<el-carousel trigger="click" height="150px">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -65,7 +65,7 @@ Indicators can be displayed outside the carousel
|
|||
```html
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -99,7 +99,7 @@ You can define when arrows are displayed
|
|||
```html
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -133,7 +133,7 @@ When a page is wide enough but has limited height, you can activate card mode fo
|
|||
```html
|
||||
<template>
|
||||
<el-carousel :interval="4000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 6">
|
||||
<el-carousel-item v-for="item in 6" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
|
|||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -169,7 +169,7 @@ The `min` and `max` properties can help you to limit the number of checked items
|
|||
v-model="checkedCities1"
|
||||
:min="1"
|
||||
:max="2">
|
||||
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -195,15 +195,15 @@ Checkbox with button styles.
|
|||
<template>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'">{{city}}</el-checkbox-button>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
|
||||
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Just assign the class name to `el-icon-iconName`.
|
|||
### Icons
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons">
|
||||
<li v-for="name in icons" :key="name">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
|
|
|
|||
|
|
@ -139,6 +139,7 @@ When there are plenty of options, use a drop-down menu to display and select des
|
|||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -182,6 +183,7 @@ When there are plenty of options, use a drop-down menu to display and select des
|
|||
<el-select v-model="value2" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
|
|
@ -228,6 +230,7 @@ Disable the whole component.
|
|||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -272,6 +275,7 @@ You can clear Select using a clear icon.
|
|||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -316,6 +320,7 @@ Multiple select uses tags to display selected options.
|
|||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -361,6 +366,7 @@ You can customize HTML templates for options.
|
|||
<el-select v-model="value6" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
|
|
@ -411,9 +417,11 @@ Display options in groups.
|
|||
<el-select v-model="value7" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -468,6 +476,7 @@ You can filter options for your desired ones.
|
|||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -593,6 +602,7 @@ Create and select new items that are not included in select options
|
|||
placeholder="Choose tags for your article">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ Switch is used for switching between two opposing states.
|
|||
```
|
||||
:::
|
||||
|
||||
### Expand value
|
||||
### Extended value types
|
||||
|
||||
:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean`, `String` or `Number` type.
|
||||
:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
|
||||
|
||||
```html
|
||||
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
|
||||
<el-tooltip :content="'Switch value: ' + value3" placement="top">
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-color="#13ce66"
|
||||
|
|
@ -110,8 +110,8 @@ on-close-icon | class name of the icon displayed when in `on` state, overrides `
|
|||
off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
|
||||
on-text | text displayed when in `on` state | string | — | ON
|
||||
off-text | text displayed when in `off` state | string | — | OFF
|
||||
on-value | switch value when in `on` state | boolean \| string \| number | — | true
|
||||
off-value | switch value when in `off` state | boolean \| string \| number | — | false
|
||||
on-value | switch value when in `on` state | boolean / string / number | — | true
|
||||
off-value | switch value when in `off` state | boolean / string / number | — | false
|
||||
on-color | background color when in `on` state | string | — | #20A0FF
|
||||
off-color | background color when in `off` state | string | — | #C0CCDA
|
||||
name| input name of Switch | string | — | —
|
||||
|
|
|
|||
|
|
@ -201,6 +201,7 @@ Only card type Tabs support addable & closeable.
|
|||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
|
|
@ -274,6 +275,7 @@ Only card type Tabs support addable & closeable.
|
|||
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs2"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ Used for marking and selection.
|
|||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
<span style="line-height: 36px;">卡片名称</span>
|
||||
<el-button style="float: right;" type="primary">操作按钮</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" class="text item">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
:::demo
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 4" class="text item">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
<div class="block">
|
||||
<span class="demonstration">默认 Hover 指示器触发</span>
|
||||
<el-carousel height="150px">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<div class="block">
|
||||
<span class="demonstration">Click 指示器触发</span>
|
||||
<el-carousel trigger="click" height="150px">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-carousel :interval="4000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 6">
|
||||
<el-carousel-item v-for="item in 6" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@
|
|||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
v-model="checkedCities1"
|
||||
:min="1"
|
||||
:max="2">
|
||||
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -206,15 +206,15 @@
|
|||
<template>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'">{{city}}</el-checkbox-button>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
|
||||
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
### 图标集合
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons">
|
||||
<li v-for="name in icons" :key="name">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@
|
|||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -187,6 +188,7 @@
|
|||
<el-select v-model="value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
|
|
@ -233,6 +235,7 @@
|
|||
<el-select v-model="value3" disabled placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -277,6 +280,7 @@
|
|||
<el-select v-model="value4" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -321,6 +325,7 @@
|
|||
<el-select v-model="value5" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -365,6 +370,7 @@
|
|||
<el-select v-model="value6" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
|
|
@ -414,9 +420,11 @@
|
|||
<el-select v-model="value7" placeholder="请选择">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -471,6 +479,7 @@
|
|||
<el-select v-model="value8" filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
@ -594,6 +603,7 @@
|
|||
placeholder="请选择文章标签">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
|
|
|
|||
|
|
@ -52,12 +52,12 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 扩展 value
|
||||
### 扩展的 value 类型
|
||||
|
||||
:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean`, `String` 或 `Number` 类型的值。
|
||||
:::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
|
||||
|
||||
```html
|
||||
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
|
||||
<el-tooltip :content="'Switch value: ' + value3" placement="top">
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-color="#13ce66"
|
||||
|
|
@ -119,8 +119,8 @@
|
|||
| off-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text` | string | — | — |
|
||||
| on-text | switch 打开时的文字 | string | — | ON |
|
||||
| off-text | switch 关闭时的文字 | string | — | OFF |
|
||||
| on-value | switch 打开时的值 | boolean \| string \| number | — | true |
|
||||
| off-value | switch 关闭时的值 | boolean \| string \| number | — | false |
|
||||
| on-value | switch 打开时的值 | boolean / string / number | — | true |
|
||||
| off-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
|
||||
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
|
|
@ -128,4 +128,4 @@
|
|||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | switch 状态发生变化时的回调函数 | 新状态的布尔值 |
|
||||
| change | switch 状态发生变化时的回调函数 | 新状态的值 |
|
||||
|
|
|
|||
|
|
@ -198,6 +198,7 @@
|
|||
```html
|
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
:key="item.name"
|
||||
v-for="(item, index) in editableTabs"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
|
|
@ -272,6 +273,7 @@
|
|||
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs2"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@
|
|||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="item.name"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
>
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -45,7 +45,7 @@
|
|||
"unpkg": "lib/index.js",
|
||||
"style": "lib/theme-default/index.css",
|
||||
"dependencies": {
|
||||
"async-validator": "^1.6.6",
|
||||
"async-validator": "^1.6.9",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"throttle-debounce": "^1.0.1"
|
||||
|
|
@ -114,12 +114,12 @@
|
|||
"transliteration": "^1.1.11",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "^2.1.8",
|
||||
"vue-loader": "^10.3.0",
|
||||
"vue": "^2.3.0",
|
||||
"vue-loader": "^12.0.2",
|
||||
"vue-markdown-loader": "^0.5.1",
|
||||
"vue-router": "^2.0.0",
|
||||
"vue-template-compiler": "^2.1.8",
|
||||
"vue-template-es2015-compiler": "^1.4.2",
|
||||
"vue-template-compiler": "^2.3.0",
|
||||
"vue-template-es2015-compiler": "^1.5.2",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "^1.15.1",
|
||||
"webpack-node-externals": "^1.5.4"
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@ export default {
|
|||
type="number"
|
||||
min={ 1 }
|
||||
max={ this.internalPageCount }
|
||||
domProps-value={ this.$parent.internalCurrentPage }
|
||||
value={ this.$parent.internalCurrentPage }
|
||||
on-change={ this.handleChange }
|
||||
on-focus={ this.handleFocus }
|
||||
style={{ width: '30px' }}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
|
||||
<el-checkbox
|
||||
v-for="filter in filters"
|
||||
:key="filter.value"
|
||||
:label="filter.value">{{ filter.text }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
<li class="el-table-filter__list-item"
|
||||
v-for="filter in filters"
|
||||
:label="filter.value"
|
||||
:key="filter.value"
|
||||
:class="{ 'is-active': isActive(filter) }"
|
||||
@click="handleSelect(filter.value)" >{{ filter.text }}</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@ const forced = {
|
|||
renderHeader: function(h) {
|
||||
return <el-checkbox
|
||||
nativeOn-click={ this.toggleAllSelection }
|
||||
domProps-value={ this.isAllSelected } />;
|
||||
value={ this.isAllSelected } />;
|
||||
},
|
||||
renderCell: function(h, { row, column, store, $index }) {
|
||||
return <el-checkbox
|
||||
domProps-value={ store.isSelected(row) }
|
||||
value={ store.isSelected(row) }
|
||||
disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
|
||||
on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import "./radio-group.css";
|
||||
@import "./radio-button.css";
|
||||
@import "./checkbox.css";
|
||||
@import "./checkbox-button.css";
|
||||
@import "./checkbox-group.css";
|
||||
@import "./switch.css";
|
||||
@import "./select.css";
|
||||
|
|
|
|||
Loading…
Reference in New Issue