mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 20:28:52 +08:00
misc doc updates
This commit is contained in:
Leopoldthecoder
parent
1b8657ce0d
commit
f9d799ce2b
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
@ -11,7 +11,7 @@
|
||||
isValid: 'valid',
|
||||
checkAll: false,
|
||||
cities: cityOptions,
|
||||
checkedCities: ['ShangHai', 'BeiJing'],
|
||||
checkedCities: ['Shanghai', 'Beijing'],
|
||||
isIndeterminate: true
|
||||
};
|
||||
},
|
||||
@ -34,13 +34,13 @@
|
||||
|
||||
## 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
|
||||
|
||||
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
|
||||
<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.
|
||||
|
||||
:::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
|
||||
<template>
|
||||
@ -127,12 +127,12 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkAll: true,
|
||||
checkedCities: ['ShangHai', 'BeiJing'],
|
||||
checkedCities: ['Shanghai', 'Beijing'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true
|
||||
};
|
||||
|
||||
@ -124,6 +124,9 @@ Currently Element ships with the following languages:
|
||||
<li>Bulgarian (bg)</li>
|
||||
<li>Polish (pl)</li>
|
||||
<li>Finnish (fi)</li>
|
||||
<li>Swedish (sv-SE)</li>
|
||||
<li>Greek (el)</li>
|
||||
<li>Slovak (sk)</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.
|
||||
|
||||
@ -136,6 +136,9 @@ Vue.use(Element, {
|
||||
<li>保加利亚语（bg）</li>
|
||||
<li>波兰语（pl）</li>
|
||||
<li>芬兰语（fi）</li>
|
||||
<li>瑞典语（sv-SE）</li>
|
||||
<li>希腊语（el）</li>
|
||||
<li>斯洛伐克语（sk）</li>
|
||||
</ul>
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
|
||||
|
||||
@ -161,6 +161,39 @@
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
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,
|
||||
multipleSelection: []
|
||||
};
|
||||
@ -229,6 +262,18 @@
|
||||
.demo-table .name-wrapper {
|
||||
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>
|
||||
|
||||
## Table 表格
|
||||
@ -1371,87 +1416,101 @@
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
:data="tableData5"
|
||||
style="width: 100%">
|
||||
<el-table-column type="expand">
|
||||
<template scope="props">
|
||||
<p>省: {{ props.row.province }}</p>
|
||||
<p>市: {{ props.row.city }}</p>
|
||||
<p>住址: {{ props.row.detailAddress }}</p>
|
||||
<p>邮编: {{ props.row.zip }}</p>
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="商品名称">
|
||||
<span>{{ props.row.name }}</span>
|
||||
</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>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="日期"
|
||||
prop="date">
|
||||
label="商品 ID"
|
||||
prop="id">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="姓名"
|
||||
label="商品名称"
|
||||
prop="name">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="描述"
|
||||
prop="desc">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
tableData5: [{
|
||||
id: '12987122',
|
||||
name: '好滋好味鸡蛋仔',
|
||||
category: '江浙小吃、小吃零食',
|
||||
desc: '荷兰优质淡奶，奶香浓而不腻',
|
||||
address: '上海市普陀区真北路',
|
||||
shop: '王小虎夫妻店',
|
||||
shopId: '10333'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
id: '12987123',
|
||||
name: '好滋好味鸡蛋仔',
|
||||
category: '江浙小吃、小吃零食',
|
||||
desc: '荷兰优质淡奶，奶香浓而不腻',
|
||||
address: '上海市普陀区真北路',
|
||||
shop: '王小虎夫妻店',
|
||||
shopId: '10333'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
id: '12987125',
|
||||
name: '好滋好味鸡蛋仔',
|
||||
category: '江浙小吃、小吃零食',
|
||||
desc: '荷兰优质淡奶，奶香浓而不腻',
|
||||
address: '上海市普陀区真北路',
|
||||
shop: '王小虎夫妻店',
|
||||
shopId: '10333'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
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
|
||||
id: '12987126',
|
||||
name: '好滋好味鸡蛋仔',
|
||||
category: '江浙小吃、小吃零食',
|
||||
desc: '荷兰优质淡奶，奶香浓而不腻',
|
||||
address: '上海市普陀区真北路',
|
||||
shop: '王小虎夫妻店',
|
||||
shopId: '10333'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
@ -521,12 +521,10 @@
|
||||
--menu-item-color: var(--link-color);
|
||||
--menu-item-fill: var(--color-extra-light-gray);
|
||||
--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-fill: var(--color-light-black);
|
||||
--dark-menu-item-hover-fill: var(--link-color);
|
||||
--dark-submenu-item-fill: var(--color-base-black);
|
||||
|
||||
/* Rate
|
||||
--------------------------*/
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
color: var(--color-white);
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
margin-top: -7px;
|
||||
margin-top: -15px;
|
||||
line-height: 16px;
|
||||
background-color: var(--datepicker-active-color);
|
||||
height: 32px;
|
||||
|
||||
@ -110,6 +110,7 @@
|
||||
},
|
||||
currentNodeKey(newVal) {
|
||||
this.store.setCurrentNodeKey(newVal);
|
||||
this.store.currentNodeKey = newVal;
|
||||
},
|
||||
data(newVal) {
|
||||
this.store.setData(newVal);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user