github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: add size

pull/7682/head^2
Leopoldthecoder 2017-10-25 11:58:58 +08:00 committed by 杨奕
parent 0d9204dd89
commit 333a010d3b
15 changed files with 105 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -23,23 +23,24 @@
<!--</a >-->
## Links
- [Home Page](http://element.eleme.io/)
- [Docs](http://element.eleme.io/#/component)
- Homepage and documentation
- International users: http://element.eleme.io/
- Chinese users: http://element-cn.eleme.io/
- [awesome-element](https://github.com/ElementUI/awesome-element)
- [FAQ](./FAQ.md)
- [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
- [Preview and generate theme online](https://elementui.github.io/theme-preview)
- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
- [Element for React](https://github.com/eleme/element-react)
- [Element for Angular](https://github.com/eleme/element-angular)
- [Atom helper](https://github.com/ElemeFE/element-helper)
- Starter Kit
- Starter kit
- [element-starter](https://github.com/ElementUI/element-starter)
- [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
- [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
- [Design resources](https://github.com/ElementUI/Resources)
- [Design resources](https://github.com/ElementUI/Resources) (working in progress)
- Boilerplate for bug reports
- [CodePen](https://codepen.io/anon/pen/ozYpNA)
- [JSFiddle](https://jsfiddle.net/gmve9d3p/)
- [Mint UI](https://github.com/ElemeFE/mint-ui) - Mobile UI elements for Vue.js
## Install
```shell

2
examples/app.vue
View File

@ -76,7 +76,7 @@
.main-cnt {
margin-top: -80px;
padding: 80px 0 120px;
padding: 80px 0 340px;
box-sizing: border-box;
min-height: 100%;
}

6
examples/components/footer.vue
View File

@ -7,6 +7,8 @@
<a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
<a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
<a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
<a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
<a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
<a href="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a>
<a href="https://github.com/eleme/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
</div>
@ -15,6 +17,7 @@
<a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
<a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
<a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
<a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
</div>
<div class="footer-social">
@ -45,8 +48,9 @@
background-color: #F7FBFD;
width: 100%;
padding: 40px 150px;
margin-top: -120px;
margin-top: -340px;
box-sizing: border-box;
height: 340px;
.container {
box-sizing: border-box;

8
examples/docs/en-US/input.md
View File

@ -101,6 +101,9 @@
display: inline-block;
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.demo-autocomplete {
text-align: center;
@ -318,7 +321,7 @@ Prepend or append an element, generally a label or a button.
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input5">
<el-input placeholder="Please input" v-model="input5" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
@ -332,6 +335,9 @@ Prepend or append an element, generally a label or a button.
.el-select .el-input {
width: 110px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
<script>
export default {

33
examples/docs/en-US/table.md
View File

@ -258,9 +258,9 @@
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
return 'warning-row';
} else if (index === 3) {
return 'positive-row';
return 'success-row';
}
return '';
},
@ -305,12 +305,12 @@
</script>
<style>
.el-table .info-row {
background: #c9e5f5;
.el-table .warning-row {
background: oldlace;
}
.el-table .positive-row {
background: #e2f0e4;
.el-table .success-row {
background: #f0f9eb;
}
.demo-table .name-wrapper {
@ -530,12 +530,12 @@ You can highlight your table content to distinguish between "success, informatio
</template>
<style>
.el-table .info-row {
background: #c9e5f5;
.el-table .warning-row {
background: oldlace;
}
.el-table .positive-row {
background: #e2f0e4;
.el-table .success-row {
background: #f0f9eb;
}
</style>
@ -544,9 +544,9 @@ You can highlight your table content to distinguish between "success, informatio
methods: {
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
return 'warning-row';
} else if (index === 3) {
return 'positive-row';
return 'success-row';
}
return '';
}
@ -1848,13 +1848,14 @@ Configuring rowspan and colspan allows you to merge cells
### Table Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | table data | array | — | — |
| data | Table data | array | — | — |
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
| max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
| stripe | whether table is striped | boolean | — | false |
| border | whether table has vertical border | boolean | — | false |
| stripe | whether Table is striped | boolean | — | false |
| border | whether Table has vertical border | boolean | — | false |
| size | size of Table | string | medium / small / mini | — |
| fit | whether width of column automatically fits its container | boolean | — | true |
| show-header | whether table header is visible | boolean | — | true |
| show-header | whether Table header is visible | boolean | — | true |
| highlight-current-row | whether current row is highlighted | boolean | — | false |
| current-row-key | key of current row, a set only prop | string,number | — | — |
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |

6
examples/docs/en-US/tree.md
View File

@ -353,9 +353,9 @@ Basic tree structure.
### Selectable
Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
Used for node selection.
::: demo
::: demo This example also shows how to load node data asynchronously.
```html
<el-tree
:props="props"
@ -421,7 +421,7 @@ Used for node selection. In the following example, data for each layer is acquir
### Custom leaf node in lazy mode
::: demo
::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
```html
<el-tree
:props="props1"

8
examples/docs/zh-CN/input.md
View File

@ -132,6 +132,9 @@
margin: 0 10px 10px 0;
}
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.demo-autocomplete {
text-align: center;
@ -344,7 +347,7 @@ export default {
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input5">
<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
@ -357,6 +360,9 @@ export default {
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
<script>
export default {

25
examples/docs/zh-CN/table.md
View File

@ -300,9 +300,9 @@
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
return 'warning-row';
} else if (index === 3) {
return 'positive-row';
return 'success-row';
}
return '';
},
@ -347,12 +347,12 @@
</script>
<style>
.el-table .info-row {
background: #c9e5f5;
.el-table .warning-row {
background: oldlace;
}
.el-table .positive-row {
background: #e2f0e4;
.el-table .success-row {
background: #f0f9eb;
}
.demo-table .name-wrapper {
@ -570,12 +570,12 @@
</template>
<style>
.el-table .info-row {
background: #c9e5f5;
.el-table .warning-row {
background: oldlace;
}
.el-table .positive-row {
background: #e2f0e4;
.el-table .success-row {
background: #f0f9eb;
}
</style>
@ -584,9 +584,9 @@
methods: {
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
return 'warning-row';
} else if (index === 3) {
return 'positive-row';
return 'success-row';
}
return '';
}
@ -1916,6 +1916,7 @@
| max-height | Table 的最大高度 | string/number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| size | Table 的尺寸 | string | medium / small / mini | — |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| show-header | 是否显示表头 | boolean | — | true |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |

6
examples/docs/zh-CN/tree.md
View File

@ -353,9 +353,9 @@
### 可选择
适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。
适用于需要选择层级时使用。
::: demo
::: demo 本例还展示了动态加载节点数据的方法。
```html
<el-tree
:props="props"
@ -421,7 +421,7 @@
### 懒加载自定义叶子节点
::: demo
::: demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
```html
<el-tree
:props="props1"

4
examples/i18n/component.json
View File

@ -12,6 +12,8 @@
"repo": "代码仓库",
"community": "社区",
"changelog": "更新日志",
"theme": "自定义主题工具",
"preview": "在线主题生成",
"faq": "常见问题",
"gitter": "在线讨论",
"starter": "脚手架",
@ -41,6 +43,8 @@
"repo": "GitHub",
"community": "Community",
"changelog": "Changelog",
"theme": "Theme CLI tool",
"preview": "Online theme generator",
"faq": "FAQ",
"gitter": "Gitter",
"starter": "Starter kit",

2
examples/pages/template/resource.tpl
View File

@ -4,7 +4,7 @@
box-sizing: border-box;
.resource-placeholder {
margin: 50px auto 0;
margin: 50px auto 100px;
text-align: center;
img {

13
packages/select/src/select.vue
View File

@ -26,7 +26,7 @@
<input
type="text"
class="el-select__input"
:class="`is-${ size }`"
:class="`is-${ selectSize }`"
@focus="visible = true"
:disabled="disabled"
@keyup="managePlaceholder"
@ -49,7 +49,7 @@
type="text"
:placeholder="currentPlaceholder"
:name="name"
:size="size"
:size="selectSize"
:disabled="disabled"
:readonly="!filterable || multiple"
:validate-event="false"
@ -544,12 +544,13 @@
resetInputHeight() {
this.$nextTick(() => {
if (!this.$refs.reference || !this.$refs.tags) return;
if (!this.$refs.reference) return;
let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
input.style.height = this.selected.length === 0 && this.size === 'mini'
? sizeMap[this.size]
: Math.max(this.$refs.tags.clientHeight + 10, sizeMap[this.size] || 40) + 'px';
const tags = this.$refs.tags;
input.style.height = this.selected.length === 0 && this.selectSize === 'mini'
? sizeMap[this.selectSize]
: Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px';
if (this.visible && this.emptyText !== false) {
this.broadcast('ElSelectDropdown', 'updatePopper');
}

10
packages/table/src/table.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="el-table"
:class="{
:class="[{
'el-table--fit': fit,
'el-table--striped': stripe,
'el-table--border': border || isGroup,
@ -9,7 +9,7 @@
'el-table--fluid-height': maxHeight,
'el-table--enable-row-hover': !store.states.isComplex,
'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
}"
}, tableSize ? `el-table--${ tableSize }` : '']"
@mouseleave="handleMouseLeave($event)">
<div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
<div class="el-table__header-wrapper" ref="headerWrapper" v-if="showHeader">
@ -178,6 +178,8 @@
}
},
size: String,
width: [String, Number],
height: [String, Number],
@ -341,6 +343,10 @@
},
computed: {
tableSize() {
return this.size || (this.$ELEMENT || {}).size;
},
bodyWrapper() {
return this.$refs.bodyWrapper;
},

2
packages/theme-chalk/src/input.scss
View File

@ -184,7 +184,7 @@
.el-select,
.el-button {
display: block;
display: inline-block;
margin: -20px;
}

20
packages/theme-chalk/src/table.scss
View File

@ -127,6 +127,26 @@
}
}
@include m(medium) {
th, td {
padding: 10px 0;
}
}
@include m(small) {
font-size: 12px;
th, td {
padding: 8px 0;
}
}
@include m(mini) {
font-size: 12px;
th, td {
padding: 6px 0;
}
}
tr {
background-color: $--color-white;