diff --git a/src/components/table/table.vue b/src/components/table/table.vue index 7404b95..9ee5db1 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -65,6 +65,19 @@ :obj-data="objData"></table-body> </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> </div> @@ -127,6 +140,14 @@ }, content: { type: Object + }, + noDataText: { + type: String, + default: '无数据' + }, + noFilteredDataText: { + type: String, + default: '无筛选结果' } }, data () { diff --git a/src/styles/components/table.less b/src/styles/components/table.less index f6a47e4..3f5600a 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -305,4 +305,14 @@ padding: 0; } } + + &-tip { + table { + width: 100%; + + td { + text-align: center; + } + } + } } diff --git a/test/routers/table.vue b/test/routers/table.vue index e9a7ed6..23e24cb 100644 --- a/test/routers/table.vue +++ b/test/routers/table.vue @@ -5,6 +5,66 @@ <i-table border :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" :highlight-row="true" @on-current-change="onCurrentChange" @@ -19,19 +79,24 @@ { type: 'selection', width: 60, - align: 'center' + align: 'center', + width: 100 }, { title: '日期', - key: 'date' + key: 'date', + fixed: 'left', + width: 100 }, { title: '姓名', - key: 'name' + key: 'name', + width: 100 }, { title: '年龄', key: 'age', + width: 100, filters: [ { label: '大于25岁', @@ -54,6 +119,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: '地址', + key: 'address', filters: [ { label: '北京', @@ -99,13 +207,6 @@ address: '上海市浦东新区世纪大道', date: '2016-10-02', longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' - }, - { - name: '周小伟', - age: 26, - address: '深圳市南山区深南大道', - date: '2016-10-04', - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' } ], currentRow: null -- libgit2 0.21.4