update Table
update Table
This commit is contained in:
梁灏
parent
642299b9b8
commit
99f80db0be
4 changed files with 66 additions and 12 deletions
|
|
@ -14,14 +14,24 @@
|
|||
<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="column.filters" placement="bottom-end">
|
||||
<Poptip v-if="column.filters" :visible.sync="column._filterVisible" placement="bottom">
|
||||
<span :class="[prefixCls + '-filter']">
|
||||
<i class="ivu-icon ivu-icon-chevron-down" @click="handleFilter($index)"></i>
|
||||
<i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
|
||||
</span>
|
||||
<div slot="content">
|
||||
<div slot="content" :class="[prefixCls + '-filter-list']">
|
||||
<div :class="[prefixCls + '-filter-list-item']">
|
||||
<checkbox-group :model.sync="column._filterChecked">
|
||||
<checkbox v-for="item in column.filters" :value="item.value">{{ item.label }}</checkbox>
|
||||
</checkbox-group>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="item in column.filters"><Checkbox>{{ item.label }}</Checkbox></li>
|
||||
<!--<li v-for="(filterIndex, item) in column.filters"><Checkbox :checked="column._filterChecked.indexOf(item.value) > -1" @on-change="handleFilterChecked(index, filterIndex)">{{ item.label }}</Checkbox></li>-->
|
||||
|
||||
</ul>
|
||||
<div :class="[prefixCls + '-filter-footer']">
|
||||
<i-button type="text" size="small" @click="handleFilter($index)">筛选</i-button>
|
||||
<i-button type="text" size="small" @click="handleReset($index)">重置</i-button>
|
||||
</div>
|
||||
</div>
|
||||
</Poptip>
|
||||
</template>
|
||||
|
|
@ -32,14 +42,16 @@
|
|||
</table>
|
||||
</template>
|
||||
<script>
|
||||
import CheckboxGroup from '../checkbox/checkbox-group.vue';
|
||||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
import Poptip from '../poptip/poptip.vue';
|
||||
import iButton from '../button/button.vue';
|
||||
import Mixin from './mixin';
|
||||
import { deepCopy } from '../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin ],
|
||||
components: { Checkbox, Poptip },
|
||||
components: { CheckboxGroup, Checkbox, Poptip, iButton },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
style: Object,
|
||||
|
|
@ -88,6 +100,12 @@
|
|||
},
|
||||
handleFilter (index) {
|
||||
|
||||
},
|
||||
handleReset (index) {
|
||||
|
||||
},
|
||||
handleFilterChecked (index, filterIndex) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,10 +291,14 @@
|
|||
})
|
||||
}
|
||||
},
|
||||
hideColumnFilter () {
|
||||
this.cloneColumns.forEach((col) => col._filterVisible = false);
|
||||
},
|
||||
handleBodyScroll (event) {
|
||||
if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
|
||||
if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
|
||||
if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
|
||||
this.hideColumnFilter();
|
||||
},
|
||||
handleMouseWheel (event) {
|
||||
const deltaX = event.deltaX;
|
||||
|
|
@ -363,8 +367,11 @@
|
|||
let center = [];
|
||||
|
||||
columns.forEach((column, index) => {
|
||||
column._sortType = 'normal';
|
||||
column._index = index;
|
||||
column._sortType = 'normal';
|
||||
column._filterVisible = false;
|
||||
column._isFiltered = false;
|
||||
column._filterChecked = [];
|
||||
|
||||
if (column.fixed && column.fixed === 'left') {
|
||||
left.push(column);
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: @shadow-right;
|
||||
overflow-x: hidden;
|
||||
//overflow-x: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -241,10 +241,39 @@
|
|||
&:hover{
|
||||
color: inherit;
|
||||
}
|
||||
&.on{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
&-list{
|
||||
padding: 8px 0 0;
|
||||
&-item{
|
||||
padding: 0 12px 8px;
|
||||
|
||||
.ivu-checkbox-wrapper + .ivu-checkbox-wrapper{
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
|
||||
& > span{
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-footer{
|
||||
padding: 4px;
|
||||
border-top: 1px solid @border-color-split;
|
||||
}
|
||||
}
|
||||
.ivu-poptip-popper{
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
|
||||
.ivu-poptip-body{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
}
|
||||
],
|
||||
render (row) {
|
||||
const type = `${row.tag}` === 'home' ? 'green' : 'red';
|
||||
const type = `${row.tag}` === '家' ? 'green' : 'red';
|
||||
return `<tag color="${type}">${row.tag}</tag>`;
|
||||
}
|
||||
},
|
||||
|
|
@ -135,28 +135,28 @@
|
|||
age: 25,
|
||||
address: '北京市朝阳区',
|
||||
edit: false,
|
||||
tag: 'home'
|
||||
tag: '家'
|
||||
},
|
||||
{
|
||||
name: '段模',
|
||||
age: 21,
|
||||
address: '北京市海淀区',
|
||||
edit: false,
|
||||
tag: 'company'
|
||||
tag: '公司'
|
||||
},
|
||||
{
|
||||
name: '刘天娇',
|
||||
age: 27,
|
||||
address: '北京市东城区',
|
||||
edit: false,
|
||||
tag: 'company'
|
||||
tag: '公司'
|
||||
},
|
||||
{
|
||||
name: '胡国伟',
|
||||
age: 22,
|
||||
address: '北京市西城区',
|
||||
edit: false,
|
||||
tag: 'home'
|
||||
tag: '家'
|
||||
}
|
||||
],
|
||||
height: 200
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue