drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #168 from rijn/151

Browse source 
Added no-data and no-filtered-data properties to the component Table
This commit is contained in:
Aresn 2017-01-05 09:35:43 +08:00 • committed by GitHub
commit f23d6ba1ac
3 changed files with 142 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/table/table.vue
View file

@ -65,6 +65,19 @@
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
</div> </div>
<div
:class="[prefixCls + '-tip']"
v-show="(!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0))">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
{{{!data || data.length === 0 ? noDataText : noFilteredDataText}}}
</td>
</tr>
</tbody>
</table>
</div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div> </div>
</div> </div>
@ -127,6 +140,14 @@
}, },
content: { content: {
type: Object type: Object
},
noDataText: {
type: String,
default: '无数据'
},
noFilteredDataText: {
type: String,
default: '无筛选结果'
} }
}, },
data () { data () {

10
src/styles/components/table.less
View file

@ -305,4 +305,14 @@
padding: 0; padding: 0;
} }
} }
&-tip {
table {
width: 100%;
td {
text-align: center;
}
}
}
} }

121
test/routers/table.vue
View file

@ -5,6 +5,66 @@
<i-table <i-table
border border
:columns="columns6" :columns="columns6"
width="500"
:data="[]"
:highlight-row="true"
@on-current-change="onCurrentChange"
@on-dblclick="onDblclick">
</i-table>
<br/>
<i-table
border
:columns="columns7"
:data="[]"
no-data-text="No Data"
:highlight-row="true"
@on-current-change="onCurrentChange"
@on-dblclick="onDblclick">
</i-table>
<br/>
<i-table
border
:columns="columns7"
:data="[]"
size="small"
:highlight-row="true"
@on-current-change="onCurrentChange"
@on-dblclick="onDblclick">
</i-table>
<br/>
<i-table
border
:columns="columns7"
:data="[]"
size="large"
:highlight-row="true"
@on-current-change="onCurrentChange"
@on-dblclick="onDblclick">
</i-table>
<br/>
<i-table
border
:columns="columns7"
:data="data5"
:highlight-row="true"
@on-current-change="onCurrentChange"
@on-dblclick="onDblclick">
</i-table>
<br/>
<i-table
border
:columns="columns6"
width="500"
:data="data5" :data="data5"
:highlight-row="true" :highlight-row="true"
@on-current-change="onCurrentChange" @on-current-change="onCurrentChange"
@ -19,19 +79,24 @@
{ {
type: 'selection', type: 'selection',
width: 60, width: 60,
align: 'center' align: 'center',
width: 100
}, },
{ {
title: '日期', title: '日期',
key: 'date' key: 'date',
fixed: 'left',
width: 100
}, },
{ {
title: '姓名', title: '姓名',
key: 'name' key: 'name',
width: 100
}, },
{ {
title: '年龄', title: '年龄',
key: 'age', key: 'age',
width: 100,
filters: [ filters: [
{ {
label: '大于25岁', label: '大于25岁',
@ -51,6 +116,49 @@
} }
} }
}, },
{
title: '地址',
key: 'address',
width: 100,
filters: [
{
label: '北京',
value: '北京'
},
{
label: '上海',
value: '上海'
},
{
label: '深圳',
value: '深圳'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
},
{
title: '长文本',
key: 'longText',
width: 100,
ellipsis: false
}
],
columns7: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{ {
title: '地址', title: '地址',
key: 'address', key: 'address',
@ -99,13 +207,6 @@
address: '上海市浦东新区世纪大道', address: '上海市浦东新区世纪大道',
date: '2016-10-02', date: '2016-10-02',
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
date: '2016-10-04',
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
} }
], ],
currentRow: null currentRow: null