mirror of https://github.com/ElemeFE/element
commit
d1bcc7962c
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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) 添加一个语言配置文件即可。
|
||||||
|
|
|
@ -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
|
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
--------------------------*/
|
--------------------------*/
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue