Merge pull request #2954 from Leopoldthecoder/dev

misc doc updates
pull/2961/head
cinwell.li 2017-02-22 15:23:40 +08:00 committed by GitHub
commit d1bcc7962c
7 changed files with 135 additions and 71 deletions

View File

@ -1,5 +1,5 @@
<script> <script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen']; const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
module.exports = { module.exports = {
data() { data() {
return { return {
@ -11,7 +11,7 @@
isValid: 'valid', isValid: 'valid',
checkAll: false, checkAll: false,
cities: cityOptions, cities: cityOptions,
checkedCities: ['ShangHai', 'BeiJing'], checkedCities: ['Shanghai', 'Beijing'],
isIndeterminate: true isIndeterminate: true
}; };
}, },
@ -34,13 +34,13 @@
## Checkbox ## Checkbox
A group of options for multiple choices. content in that tag will become the description following the button of the checkbox. A group of options for multiple choices.
### Basic usage ### Basic usage
Checkbox can be used alone to switch between two states. Checkbox can be used alone to switch between two states.
:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. :::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox.
```html ```html
<template> <template>
@ -87,7 +87,7 @@ Disabled state for checkbox.
It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked. It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. in `el-checkbox` element, `label` is the value of the checkbox. While no content in that tag, it's also modify the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa. :::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.
```html ```html
<template> <template>
@ -127,12 +127,12 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
</el-checkbox-group> </el-checkbox-group>
</template> </template>
<script> <script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen']; const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default { export default {
data() { data() {
return { return {
checkAll: true, checkAll: true,
checkedCities: ['ShangHai', 'BeiJing'], checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions, cities: cityOptions,
isIndeterminate: true isIndeterminate: true
}; };

View File

@ -124,6 +124,9 @@ Currently Element ships with the following languages:
<li>Bulgarian (bg)</li> <li>Bulgarian (bg)</li>
<li>Polish (pl)</li> <li>Polish (pl)</li>
<li>Finnish (fi)</li> <li>Finnish (fi)</li>
<li>Swedish (sv-SE)</li>
<li>Greek (el)</li>
<li>Slovak (sk)</li>
</ul> </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. 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.

View File

@ -136,6 +136,9 @@ Vue.use(Element, {
<li>保加利亚语bg</li> <li>保加利亚语bg</li>
<li>波兰语pl</li> <li>波兰语pl</li>
<li>芬兰语fi</li> <li>芬兰语fi</li>
<li>瑞典语sv-SE</li>
<li>希腊语el</li>
<li>斯洛伐克语sk</li>
</ul> </ul>
如果你需要使用其他的语言,欢迎贡献 PR只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。 如果你需要使用其他的语言,欢迎贡献 PR只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。

View File

@ -161,6 +161,39 @@
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}], }],
tableData5: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
currentRow: null, currentRow: null,
multipleSelection: [] multipleSelection: []
}; };
@ -229,6 +262,18 @@
.demo-table .name-wrapper { .demo-table .name-wrapper {
display: inline-block; display: inline-block;
} }
.demo-table .demo-table-expand {
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}
</style> </style>
## Table 表格 ## Table 表格
@ -1371,87 +1416,101 @@
```html ```html
<template> <template>
<el-table <el-table
:data="tableData3" :data="tableData5"
style="width: 100%"> style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template scope="props"> <template scope="props">
<p>省: {{ props.row.province }}</p> <el-form label-position="left" inline class="demo-table-expand">
<p>市: {{ props.row.city }}</p> <el-form-item label="商品名称">
<p>住址: {{ props.row.detailAddress }}</p> <span>{{ props.row.name }}</span>
<p>邮编: {{ props.row.zip }}</p> </el-form-item>
<el-form-item label="所属店铺">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label="店铺 ID">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分类">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label="店铺地址">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="日期" label="商品 ID"
prop="date"> prop="id">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="姓名" label="商品名称"
prop="name"> prop="name">
</el-table-column> </el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table> </el-table>
</template> </template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script> <script>
export default { export default {
data() { data() {
return { return {
tableData3: [{ tableData5: [{
date: '2016-05-03', id: '12987122',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, { }, {
date: '2016-05-02', id: '12987123',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, { }, {
date: '2016-05-04', id: '12987125',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, { }, {
date: '2016-05-01', id: '12987126',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}] }]
} }
} }

View File

@ -521,12 +521,10 @@
--menu-item-color: var(--link-color); --menu-item-color: var(--link-color);
--menu-item-fill: var(--color-extra-light-gray); --menu-item-fill: var(--color-extra-light-gray);
--menu-item-hover-fill: var(--disabled-border-base); --menu-item-hover-fill: var(--disabled-border-base);
--submenu-item-fill: var(--color-light-gray);
--dark-menu-item-color: var(--link-color); --dark-menu-item-color: var(--link-color);
--dark-menu-item-fill: var(--color-light-black); --dark-menu-item-fill: var(--color-light-black);
--dark-menu-item-hover-fill: var(--link-color); --dark-menu-item-hover-fill: var(--link-color);
--dark-submenu-item-fill: var(--color-base-black);
/* Rate /* Rate
--------------------------*/ --------------------------*/

View File

@ -24,7 +24,7 @@
color: var(--color-white); color: var(--color-white);
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
margin-top: -7px; margin-top: -15px;
line-height: 16px; line-height: 16px;
background-color: var(--datepicker-active-color); background-color: var(--datepicker-active-color);
height: 32px; height: 32px;

View File

@ -110,6 +110,7 @@
}, },
currentNodeKey(newVal) { currentNodeKey(newVal) {
this.store.setCurrentNodeKey(newVal); this.store.setCurrentNodeKey(newVal);
this.store.currentNodeKey = newVal;
}, },
data(newVal) { data(newVal) {
this.store.setData(newVal); this.store.setData(newVal);