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

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2017-03-09 14:11:22 +08:00
parent b2012015da
commit 486d4fda19
9 changed files with 132 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/table/table-head.vue
View file

@ -1,43 +1,43 @@
<template>
<table cellspacing="0" cellpadding="0" border="0" :style="styles">
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index, true)">
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)">
</colgroup>
<thead>
<tr>
<th v-for="(index, column) in columns" :class="alignCls(column)">
<th v-for="(column, index) in columns" :class="alignCls(column)">
<div :class="cellClasses(column)">
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else>
{{{ renderHeader(column, $index) }}}
<span v-html="renderHeader(column, index)"></span>
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort($index, 'asc')"></i>
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort(index, 'asc')"></i>
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></i>
</span>
<Poptip
v-if="isPopperShow(column)"
:visible.sync="column._filterVisible"
:visible="column._filterVisible"
placement="bottom"
@on-popper-hide="handleFilterHide($index)">
@on-popper-hide="handleFilterHide(index)">
<span :class="[prefixCls + '-filter']">
<i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
</span>
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
<div :class="[prefixCls + '-filter-list-item']">
<checkbox-group :model.sync="column._filterChecked">
<checkbox-group v-model="column._filterChecked">
<checkbox v-for="item in column.filters" :value="item.value">{{ item.label }}</checkbox>
</checkbox-group>
</div>
<div :class="[prefixCls + '-filter-footer']">
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">{{ t('i.table.confirmFilter') }}</i-button>
<i-button type="text" size="small" @click="handleReset($index)">{{ t('i.table.resetFilter') }}</i-button>
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(index)">{{ t('i.table.confirmFilter') }}</i-button>
<i-button type="text" size="small" @click.native="handleReset(index)">{{ t('i.table.resetFilter') }}</i-button>
</div>
</div>
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
<ul :class="[prefixCls + '-filter-list-single']">
<li
:class="itemAllClasses(column)"
@click="handleReset($index)">{{ t('i.table.clearFilter') }}</li>
@click="handleReset(index)">{{ t('i.table.clearFilter') }}</li>
<li
:class="itemClasses(column, item)"
v-for="item in column.filters"
@ -61,11 +61,12 @@
import Locale from '../../mixins/locale';
export default {
name: 'TableHead',
mixins: [ Mixin, Locale ],
components: { CheckboxGroup, Checkbox, Poptip, iButton },
props: {
prefixCls: String,
style: Object,
styleObject: Object,
columns: Array,
objData: Object,
data: Array, // rebuildData
@ -77,8 +78,8 @@
},
computed: {
styles () {
const style = Object.assign({}, this.style);
const width = this.$parent.bodyHeight === 0 ? parseInt(this.style.width) : parseInt(this.style.width) + this.$parent.scrollBarWidth;
const style = Object.assign({}, this.styleObject);
const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
style.width = `${width}px`;
return style;
},