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

对表格当没有内容显示时,显示一个"友好的暂无数据"字,还有就是添加一个在表格里面插入slot="bottom"一个分页组件位置的说明

pull/36/head
perfectyang 2016-09-08 14:26:55 +08:00
parent 65d6938ddf
commit 37f51f42cd
3 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/docs/table.md
View File

@ -678,7 +678,7 @@
### 排序 ### 排序
对表格进行排序，可快速查找或对比数据。 对表格进行排序，可快速查找或对比数据。(在el-table里面可以插件一个slot="bottom"的组件,作为自己的分页)
:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。 :::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
```html ```html
@ -703,6 +703,7 @@
label="地址" label="地址"
:formatter="formatter"> :formatter="formatter">
</el-table-column> </el-table-column>
<div slot="bottom">这里可以存放分页插件</div>
</el-table> </el-table>
</template> </template>

79
packages/table/src/table-body.js
View File

@ -32,42 +32,49 @@ export default {
render(h) { render(h) {
return ( return (
<table <div>
class="el-table__body" <table
cellspacing="0" class="el-table__body"
cellpadding="0" cellspacing="0"
border="0"> cellpadding="0"
<tbody> border="0">
{ <tbody>
this._l(this.data, (row, $index) => {
<tr this._l(this.data, (row, $index) =>
on-click={ ($event) => this.handleClick($event, row) } <tr
on-mouseenter={ _ => this.handleMouseEnter($index) } on-click={ ($event) => this.handleClick($event, row) }
style={ this.getCustomStyle(row) } on-mouseenter={ _ => this.handleMouseEnter($index) }
class={{ style={ this.getCustomStyle(row) }
'current-row': row === this.$parent.selected, class={{
'hover': this.$parent.$parent.hoverRowIndex === $index 'current-row': row === this.$parent.selected,
}}> 'hover': this.$parent.$parent.hoverRowIndex === $index
{ }}>
this._l(this.columns, (column) => {
<td this._l(this.columns, (column) =>
style={ this.getColumnWhiteSpaceStyle(column) } <td
class={ column.id } style={ this.getColumnWhiteSpaceStyle(column) }
on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) } class={ column.id }
on-mouseleave={ this.handleCellMouseLeave }> on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
{ on-mouseleave={ this.handleCellMouseLeave }>
column.template {
? column.template.call(this._renderProxy, h, { row, column, $index, _self: this.$parent.$vnode.context }) column.template
: <div class="cell">{ this.$getPropertyText(row, column.property, column.id) }</div> ? column.template.call(this._renderProxy, h, { row, column, $index, _self: this.$parent.$vnode.context })
} : <div class="cell">{ this.$getPropertyText(row, column.property, column.id) }</div>
</td> }
).concat(this.fixed ? <td class="gutter" /> : '') </td>
} ).concat(this.fixed ? <td class="gutter" /> : '')
</tr> }
) </tr>
} )
</tbody> }
</table> </tbody>
</table>
{
this.data.length === 0
? (<div style={{paddingTop: '20px', textAlign: 'center', paddingBottom: '20px'}}>暂无数据显示!!</div>)
: ''
}
</div>
); );
}, },

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

@ -11,7 +11,7 @@
<div class="el-table__fixed-header-wrapper" v-if="fixedColumnCount > 0"> <div class="el-table__fixed-header-wrapper" v-if="fixedColumnCount > 0">
<table-header :columns="fixedColumns" :all-selected="allSelected" @allselectedchange="handleAllSelectedChange" :selection="selection" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }" :border="border"></table-header> <table-header :columns="fixedColumns" :all-selected="allSelected" @allselectedchange="handleAllSelectedChange" :selection="selection" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }" :border="border"></table-header>
</div> </div>
<div class="el-table__fixed-body-wrapper" v-if="fixedColumnCount > 0" :style="{ top: headerHeight + 'px' }"> <div class="el-table__fixed-body-wrapper" v-if="fixedColumnCount > 0 && filterData.length > 0" :style="{ top: headerHeight + 'px' }">
<table-body :columns="fixedColumns" fixed :selection="selection" :data="filterData" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }"></table-body> <table-body :columns="fixedColumns" fixed :selection="selection" :data="filterData" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }"></table-body>
</div> </div>
</div> </div>