Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
## Custom theme
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in.
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
```shell
npm i element-theme -D
```
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
Then install the default theme from npm or GitHub.
```shell
npm i element-theme-default@next -D
# from npm
npm i element-theme-default -D
# 从 GitHub
# from GitHub
npm i https://github.com/ElementUI/theme-default -D
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
If you are unfamiliar with `babel-plugin-component`, please refer to <ahref="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:
```javascript
// 完整引入 Element
importVuefrom'vue'
importElementUIfrom'element-ui'
importlocalefrom'element-ui/lib/locale/lang/en'
...
...
@@ -11,26 +10,25 @@ import locale from 'element-ui/lib/locale/lang/en'
The Chinese language pack is imported by default, even if you're using another language. But with `IgnorePlugin` provided by webpack you can ignore it when building:
Currently Element ships with the following languages:
<ulclass="language-list">
<li>Chinese (zh-CN)</li>
<li>English (en)</li>
<li>German (de)</li>
<li>Portuguese (pt)</li>
</ul>
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
Element UI is a background components library that help you develop your background projects faster and easier.
This part walks you through the process of using Element in a webpack project.
### Install
### Use Starter Kit
```bash
$ npm install element-ui@next --save
```
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
### Register components
If you prefer not to use them, please read the following.
Import all element-ui components
### Config files
```javascript
importVuefrom'vue'
importElementfrom'element-ui'
import'element-ui/lib/theme-default/index.css'
Create a new project, and its structure should be
```text
|- src/ --------------------- source code
|- App.vue
|- main.js -------------- entry
|- .babelrc ----------------- babel config
|- index.html --------------- HTML template
|- package.json ------------- npm config
|- README.md ---------------- readme
|- webpack.config.json ------ webpack config
```
Typical configurations for these config files are:
// use Vue.use to register a plugin
Vue.use(element)
**.babelrc**
```json
{
"presets":[
["es2015",{"modules":false}]
]
}
```
Or just import some components you need
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
You can import Element entirely, or just import what you need. Let's start with fully import.
#### Fully import
In main.js:
```javascript
importSelectfrom'element-ui/lib/select';
import'element-ui/lib/theme-default/select.css';
importButtonfrom'element-ui/lib/button';
import'element-ui/lib/theme-default/button.css';
importVuefrom'vue'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-default/index.css'
importAppfrom'./App.vue'
Vue.component(Select.name,Select);
Vue.component(Button.name,Button);
Vue.use(MintUI)
newVue({
el:'#app',
render:h=>h(App)
})
```
The above imports Element entirely. Note that CSS file needs to be imported separately.
#### On demand
With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.
### Use babel-plugin-component
First, install babel-plugin-component:
Configure `.bablerc`
```bash
npm install babel-plugin-component -D
```
Then edit .babelrc:
```json
{
"plugins":["xxx",["component",[
"presets":[
["es2015",{"modules":false}]
],
"plugins":[["component",[
{
"libraryName":"element-ui",
"styleLibraryName":"theme-default"
...
...
@@ -63,24 +182,38 @@ Configure `.bablerc`
}
```
### Import components by \<style\> and \<script\> tags
Next, if you need Button and Select, edit main.js:
Be careful, **import vue.js before element**, just like if you want to use a jquery-plugin, first of all, you must import jquery.
```javascript
importVuefrom'vue'
import{Button,Select}from'element-ui'
importAppfrom'./App.vue'
This is a [demo](https://codepen.io/QingWei-Li/pen/ozYpNA) about how to use it by cdn, and we use unpkg cdn in this case.
Step-by-step guide to guide the user to complete the task in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
### How to use
### Basic usage
Simple step bar.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is adaptive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
:::demo Use `title` attribute to set the name of the step, or override the attribute setting with `slot`. We have list all the slot name for you at the end of the document.
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
A variety of custom icons can be used in the step bar.
:::demo The icon is set by the `icon` property, The types of icons can be found in the document for the Icon component, in addition, you can customize the icon through the slot name.
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
Switch component is used for switching the component between two opposing state.
## Switch
### How to use
Switch is used for switching between two opposing states.
Use `v-model` directly to bind a **boolean** value to this component and control the opposing states. Additionally you can add `on-text` or `off-text` attribute to show the message when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the backgroundcolor of this component in different states.
### Basic usage
:::demo
:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
```html
<el-switch
...
...
@@ -23,11 +33,9 @@ Use `v-model` directly to bind a **boolean** value to this component and control
:::
### disabled
### Disabled
`disabled` attribute means whether the component need to be disabled or not.
:::demo
:::demo Adding the `disabled` attribute disables Switch.
```html
<el-switch
...
...
@@ -46,21 +54,20 @@ Use `v-model` directly to bind a **boolean** value to this component and control
### Attributes
Attribute | Description | Type | Options | Default
Attribute | Description | Type | Accepted Values | Default
----| ----| ----| ----|----
disbaled | Disable the component or not | boolean | --- | false
width| The width of component | number | --- | 58 (with text) / 46 (no text)
on-close-icon| If component is in 'on' state, set the classes of icon | string | ---| ---
off-close-icon|If component is in 'off' state, set the classes of icon| string | ---| ---
on-text | If component is in 'on' state, set the text of component | string | --- | ON
off-text | If component is in 'off' state, set the text of component | string | --- | OFF
on-color | If component is in 'on' state, set the background color of component | string | --- | <spanstyle="background-color: #20A0FF">#20A0FF</span>
off-color | If component is in 'off' state, set the background color of component | string | --- | <spanstyle="background-color: #C0CCDA">#C0CCDA</span>
address: 'The Grove, 189 The Grove Dr, Los Angeles',
zip: 'CA 90036'
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
zip: 'CA 90036'
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
zip: 'CA 90036'
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
zip: 'CA 90036'
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}],
tableData2: [{
date: '2016-05-02',
name: 'Tom',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'Tom',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
$info: true
}, {
date: '2016-05-01',
name: 'Tom',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Tom',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
$positive: true
}],
tableData3: [{
...
...
@@ -56,75 +59,84 @@
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'The Grove, 189 The Grove Dr, Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}],
singleSelection: {},
currentRow: null,
multipleSelection: []
};
},
methods: {
handleSelectionChange(val) {
this.singleSelection = val;
this.multipleSelection = val;
},
handleMultipleSelectionChange(val) {
this.multipleSelection = val;
handleCurrentChange(val) {
this.currentRow = val;
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
}
return '';
}
},
watch: {
singleSelection(val) {
console.log('selection: ', val);
},
multipleSelection(val) {
console.log('selection: ', val);
}
...
...
@@ -134,18 +146,13 @@
## Table
Display multiple data in same or similar format.
You can sort, filter, compare or other custom actions on your data.
Display multiple data with similar format. You can sort, filter, compare your data in a table.
### Basic table
Basic table is just for data display.
### Basic Table
Usage with basic table.
:::demo
When set attribute `data` of component `el-table` with an object array, you can set attribute `property` to correspond to the key of object in the data array in `el-table-column`, and set the attribute `label` to define the column name.
You can also use the attribute `width` to define the width of columns.
:::demo After setting attribute `data` of `el-table` with an object array, you can use `prop` (corresponding to a key of the object in `data` array) in `el-table-column` to insert data to table columns, and set the attribute `label` to define the column name. You can also use the attribute `width` to define the width of columns.
```html
<template>
...
...
@@ -153,17 +160,17 @@ You can also use the attribute `width` to define the width of columns.
:data="tableData"
style="width: 100%">
<el-table-column
property="date"
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
property="name"
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
property="address"
prop="address"
label="Address">
</el-table-column>
</el-table>
...
...
@@ -174,21 +181,21 @@ You can also use the attribute `width` to define the width of columns.
data(){
return{
tableData:[{
date:'2016-05-03',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-02',
name:'Jack',
address:'Shanghai'
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}]
}
}
...
...
@@ -197,12 +204,11 @@ You can also use the attribute `width` to define the width of columns.
```
:::
### Strped Table
### Striped Table
Striped table adds zebra-stripes to a table, so you can easily distinguish between different rows of data.
Striped table makes it easier to distinguish different rows.
:::demo
Attribute `stripe` could get it. It accepts a `Boolean` parameter, whose default value is false. Set it to true to turn it on.
:::demo Attribute `stripe` accepts a `Boolean`. If `true`, table will be striped.
```html
<template>
<el-table
...
...
@@ -210,17 +216,17 @@ Attribute `stripe` could get it. It accepts a `Boolean` parameter, whose default
stripe
style="width: 100%">
<el-table-column
property="date"
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
property="name"
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
property="address"
prop="address"
label="Address">
</el-table-column>
</el-table>
...
...
@@ -231,22 +237,22 @@ Attribute `stripe` could get it. It accepts a `Boolean` parameter, whose default
data(){
return{
tableData:[{
date:'2016-05-02',
name:'Jack',
address:'Shanghai'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
}]
date:'2016-05-03',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-02',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-04',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-01',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}]
}
}
}
...
...
@@ -256,8 +262,7 @@ Attribute `stripe` could get it. It accepts a `Boolean` parameter, whose default
### Table with border
:::demo
By default, table component has no border in vertical. If you need it, you can set attribute `border` to `Boolean` value true. It accepts boolean type value. Turn on it by setting to `true`.
:::demo By default, Table has no vertical border. If you need it, you can set attribute `border` to `true`.
```html
<template>
...
...
@@ -266,17 +271,17 @@ By default, table component has no border in vertical. If you need it, you can s
border
style="width: 100%">
<el-table-column
property="date"
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
property="name"
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
property="address"
prop="address"
label="Address">
</el-table-column>
</el-table>
...
...
@@ -287,22 +292,22 @@ By default, table component has no border in vertical. If you need it, you can s
data(){
return{
tableData:[{
date:'2016-05-02',
name:'Jack',
address:'Shanghai'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
}]
date:'2016-05-03',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-02',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-04',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-01',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}]
}
}
}
...
...
@@ -312,58 +317,73 @@ By default, table component has no border in vertical. If you need it, you can s
### Table with status
You can highlight your table content to distinguish between "success, information, warning, danger" and others.
You can highlight your table content to distinguish between "success, information, warning, danger" and other states.
:::demo
Add customer background color to display the line in certain status. If some line has the field which is true in the array `custom-criteria`, it will be set the corresponding background color in the array `custom-background-colors`.
:::demo Use `row-class-name` in `el-table` to add custom classes to a certain row. Then you can style it with custom classes.
@@ -373,10 +393,9 @@ Add customer background color to display the line in certain status. If some li
### Table with fixed header
When there are too many rows with so much data in vertical orientation, you could use a fixed header.
When there are too many rows, you can use a fixed header.
:::demo
By setting the atrribute `height` of element `el-table`, you can fix the table header without any othercodes.
:::demo By setting the attribute `height` of `el-table`, you can fix the table header without any other codes.
```html
<template>
<el-table
...
...
@@ -385,17 +404,17 @@ By setting the atrribute `height` of element `el-table`, you can fix the table h
border
style="width: 100%">
<el-table-column
property="date"
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
property="name"
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
property="address"
prop="address"
label="Address">
</el-table-column>
</el-table>
...
...
@@ -406,46 +425,34 @@ By setting the atrribute `height` of element `el-table`, you can fix the table h
data(){
return{
tableData3:[{
date:'2016-05-02',
name:'Jack',
address:'Shanghai'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
}]
date:'2016-05-03',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-02',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-04',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-01',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-08',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-06',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-07',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}],
}
}
}
...
...
@@ -455,47 +462,56 @@ By setting the atrribute `height` of element `el-table`, you can fix the table h
### Table with fixed column
When so many columns and so much data in horizontal orientation, you can set the first column fixed.
When there are too many columns, you can fix some of them.
:::demo
Set the attribute `fixed-column-count`, it accepts a `Number` which indicates the number of columns to be fixed from the left.
:::demo Attribute `fixed` is used in `el-table-column`, it accepts a `Boolean`. If `true`, the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.
@@ -505,32 +521,36 @@ Set the attribute `fixed-column-count`, it accepts a `Number` which indicates th
return{
tableData:[{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Home'
},{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-02',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Office'
},{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-04',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Home'
},{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-01',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Office'
}]
}
}
...
...
@@ -541,44 +561,44 @@ Set the attribute `fixed-column-count`, it accepts a `Number` which indicates th
### Table with fixed columns and header
When so much data in vertical and horizontal orientation, you could set certain column and header fixed.
When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.
:::demo Fix columns and header at the same time with set attribute at the same time.
:::demo Fix columns and header at the same time by combining the above two examples.
```html
<template>
<el-table
:data="tableData3"
:fixed-column-count="1"
border
style="width: 100%"
height="250">
<el-table-column
property="date"
fixed
prop="date"
label="Date"
width="150">
</el-table-column>
<el-table-column
property="name"
prop="name"
label="Name"
width="120">
</el-table-column>
<el-table-column
property="state"
label="state"
prop="state"
label="State"
width="120">
</el-table-column>
<el-table-column
property="city"
prop="city"
label="City"
width="120">
</el-table-column>
<el-table-column
property="address"
prop="address"
label="Address"
width="300">
</el-table-column>
<el-table-column
property="zip"
prop="zip"
label="Zip"
width="120">
</el-table-column>
...
...
@@ -591,31 +611,52 @@ When so much data in vertical and horizontal orientation, you could set certain
return{
tableData3:[{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
},{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
date:'2016-05-02',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
},{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
date:'2016-05-04',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
},{
date:'2016-05-03',
name:'Jack',
state:'Shanghai',
city:'Putuo district',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
date:'2016-05-01',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
},{
date:'2016-05-08',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
},{
date:'2016-05-06',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
},{
date:'2016-05-07',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036'
}]
}
...
...
@@ -625,20 +666,18 @@ When so much data in vertical and horizontal orientation, you could set certain
```
:::
### Single Select
### Single select
When select a row , display with certain background color.
Single row selection is supported.
:::demo
You can choose one row or more with the table component. You can select one row (`single`) or several rows(`multiple`) by setting the attribute `selection-mode`. If you don't need it, set it to `none`. `selectselectionchange` event will be triggered when the table row is selected. It accepts a parameter `value` which is the corresponding object when the table is generated. The example below shows the attribute `allow-no-selection`, which accepts a `Boolean` type. If `true`, it is allowed to be empty. With setting to `false` by default, the default value the first object of the data array. If you wanna display index, you can add a new element `el-table-column`. Set attribute `type` to `index`, you will see the index starting with 1 .
:::demo Table supports single row selection. You can activate it by adding the `highlight-currnet-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1.
```html
<template>
<el-table
:data="tableData"
selection-mode="single"
@selectionchange="handleSelectionChange"
style="width: 100%"
allow-no-selection>
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
type="index"
width="50">
...
...
@@ -665,53 +704,29 @@ You can choose one row or more with the table component. You can select one row
data(){
return{
tableData:[{
date:'2016-05-02',
name:'Jack',
address:'Shanghai'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
},{
date:'2016-05-04',
name:'Lily',
address:'Beijing'
},{
date:'2016-05-01',
name:'Nathan',
address:'Guangzhou'
},{
date:'2016-05-03',
name:'Natalia',
address:'Chengdu'
}],
singleSelection:{}
date:'2016-05-03',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-02',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-04',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-01',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}],
currentRow:null
}
},
methods:{
handleSelectionChange(val){
this.singleSelection=val;
handleCurrentChange(val){
this.currentRow=val;
}
}
}
...
...
@@ -719,27 +734,19 @@ You can choose one row or more with the table component. You can select one row
```
:::
### Multiple Select
Use Checkbox to choose multiple options.
:::demo
There is not much difference between Multiple Select and Single Select, except that the argument in the` selectionchange` event is changed from object to object array. A column is needed to display the checkbox: manually adding an `el-table-column`, and setting the` type` to `selection`. Attributes `inline-template` and `show-tooltip-when-overflow` are used to show other Attributes in the example below.
When the attribute `inline-template` is set, you can use the object of `row` to replace the setting of attribute `property`.
By default, if the content is too much, the extra content will display in the new line. If you wanna show content in one line, use attribute `show-tooltip-when-overflow`, which accepts the `Boolean` type. When set true the extra content will show in tooltip when hover on it.
### Multiple select
You can also select multiple rows.
:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `inline-template` and `show-overflow-tooltip`: when the attribute `inline-template` is set, you can use custom template inside `el-table-column`, and access current row data via `row`; by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
```html
<template>
<el-table
:data="tableData3"
border
selection-mode="multiple"
style="width: 100%"
@selectionchange="handleMultipleSelectionChange">
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="50">
...
...
@@ -758,7 +765,7 @@ By default, if the content is too much, the extra content will display in the ne
<el-table-column
property="address"
label="Address"
show-tooltip-when-overflow>
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
...
...
@@ -767,26 +774,34 @@ By default, if the content is too much, the extra content will display in the ne
exportdefault{
data(){
return{
tableData3:[{
tableData3:[{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-02',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-04',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-01',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-08',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-06',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-07',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}],
multipleSelection:[]
}
...
...
@@ -802,13 +817,11 @@ By default, if the content is too much, the extra content will display in the ne
```
:::
### Order
### Sorting
Sort the data to find or compare data quickly.
:::demo
Set attribute `sortable` to a certain column to sort the data
based on the column . It accepts the `Boolean` type with an default value `false`. In the example below we use attribute `formatter` to format the value of certain column. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
```html
<template>
<el-table
...
...
@@ -816,18 +829,18 @@ based on the column . It accepts the `Boolean` type with an default value `false
border
style="width: 100%">
<el-table-column
property="date"
prop="date"
label="Date"
sortable
width="180">
</el-table-column>
<el-table-column
property="name"
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
property="address"
prop="address"
label="Address"
:formatter="formatter">
</el-table-column>
...
...
@@ -840,30 +853,105 @@ based on the column . It accepts the `Boolean` type with an default value `false
return{
tableData:[{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-02',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-03',
name:'Jack',
address:'Putuo District of Shanghai Jinsha River Road 1518 Lane',
zip:'CA 90036'
date:'2016-05-04',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
},{
date:'2016-05-01',
name:'Tom',
address:'No. 189, Grove St, Los Angeles'
}]
}
},
methods:{
formatter(row,column){
returnrow.address;
}
}
}
</script>
```
:::
### Filter
Filter the table to find desired data.
:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has two parameters: `value` and `row`.
| property | field name corresponding to the column name | string | — | — |
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1) | string | selection/index | — |
| label | column label | string | — | — |
| prop | field name. You can also use its alias: `property` | string | — | — |
| width | column width | string | — | — |
| sortable | whether can be sort or not | boolean | — | false |
| resizable | whether width of the column will change when dragged (If need it, you should set attribute `border` of `el-table` to true) ） | boolean | — | false |
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring with 1) | string | selection/index | — |
| formatter | function that formats content, which has two parameters row and column | function | — | — |
| show-tooltip-when-overflow | if cell content is too long , the extra content will hide. Hovering on it the extra content will show in tooltip | Boolean | — | false |
| inline-template | when using the attribute, you could customize the content which the column. Refer to the date column in Multiple Select, getting row data by `row` object, getting current context by _self in JSX. In this case you don't need set the attribute `property`. | — | — |
| align | Alignment | String | left, center, right | left |
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |
| render-header | render function for table header of this column | Function(h, { column, $index }) | — | — |
| sortable | whether column can be sorted | boolean | — | false |
| sort-method | sorting method, works when `sortable` is `true` | Function(a, b) | — | — |
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
| formatter | function that formats content | Function(row, column) | — | — |
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — |
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row) | — | — |
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
Divide data collections which have related contents however belong to different types.
Divide data collections which are related yet belong to different types.
### How to use
### Basic usage
Basic and concise tabs.
:::demo Tabs provide a selective card functionality and it can be achieved only by using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, you can write content in the label; In the next example, we add a `active-name` attribute in `el-tabs`, which can take a `String` value. It means an active card. In the `el-tab-pane` you can set corresponding `name` attribute,if there is no `name`, then the default sequence is `1`/`2`/`3`/`4`. In the example, the selected card is card 2. Since there's no `name`, then set`active-name` to `2` can reach the same goal.
:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting`active-name` to `2` can reach the same goal.
| name | The identifier corresponding to the activeName of the selective card, representing the alias of the selective card | string | — | The ordinal number of the selective card in the sequence, i.e. the first one is '1' |
| label | title of the tab | string | — | — |
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
::: demo It's defined by the `type` attribute, which is optional.
::: demo Use the `type` attribute to define Tag's type.
```html
<el-tag>Label One</el-tag>
<el-tagtype="gray">Label Two</el-tag>
<el-tagtype="primary">Label Three</el-tag>
<el-tagtype="success">Label Four</el-tag>
<el-tagtype="warning">Label Five</el-tag>
<el-tagtype="danger">Label Six</el-tag>
<el-tag>Tag One</el-tag>
<el-tagtype="gray">Tag Two</el-tag>
<el-tagtype="primary">Tag Three</el-tag>
<el-tagtype="success">Tag Four</el-tag>
<el-tagtype="warning">Tag Five</el-tag>
<el-tagtype="danger">Tag Six</el-tag>
```
:::
### Removable Label
### Removable Tag
:::demo Set the `closable` attribute to define a removeable tag, it can accepts a `Boolean` and you can set it with `true`. The removal of default label is accompanied by a gradient animation. If you don't want to use it, you can set the `close-transition` attribute, it accepts a `Boolean`, and will be turn off if set true. Setting the `close` event to handle the callback function after closing.
:::demo Set the `closable` attribute to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
```html
<el-tag
...
...
@@ -67,12 +67,12 @@ Used for marking and selection.
data(){
return{
tags:[
{key:1,name:'Label One',type:''},
{key:2,name:'Label Two',type:'gray'},
{key:5,name:'Label Three',type:'primary'},
{key:3,name:'Label Four',type:'success'},
{key:4,name:'Label Five',type:'warning'},
{key:6,name:'Label Six',type:'danger'}
{key:1,name:'Tag One',type:''},
{key:2,name:'Tag Two',type:'gray'},
{key:5,name:'Tag Three',type:'primary'},
{key:3,name:'Tag Four',type:'success'},
{key:4,name:'Tag Five',type:'warning'},
{key:6,name:'Tag Six',type:'danger'}
]
};
},
...
...
@@ -87,15 +87,15 @@ Used for marking and selection.
