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

Poptip add prop popper-class, Table update

Browse source
This commit is contained in:
梁灏 2018-03-21 10:59:23 +08:00
parent f13df74fef
commit 19c208d380
5 changed files with 32 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
examples/routers/table.vue
View file

@ -1,27 +1,16 @@
<template>
<div>
<Table border ref="selection" :columns="columns4" :data="data1"></Table>
<Button @click="handleSetData">Set Data</Button>
<Button @click="handleClearData">Clear Data</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
<div style="margin:20px 0px;">
<Table :data="tableData1" :columns="tableColumns1" style="width: 100%;" stripe></Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
</div>
</div>
</div>
<Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table>
<Button @click="handleClearCurrentRow">Clear</Button>
</div>
</template>
<script>
export default {
data () {
return {
columns4: [
columns3: [
{
type: 'selection',
type: 'index',
width: 60,
align: 'center'
},
@ -39,47 +28,6 @@
}
],
data1: [
],
tableData1: [],
tableColumns1: [
{
title: 'Data1',
key: 'data1'
},
{
title: 'Data2',
key: 'data2'
},
{
title: 'Data3',
key: 'data3'
},
{
title: 'Data4',
key: 'data4'
},
{
title: 'Data5',
key: 'data5'
},
{
title: 'Data6',
key: 'data6'
},
]
}
},
mounted(){
this.refreshData();
},
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
handleSetData () {
this.data1 = [
{
name: 'John Brown',
age: 18,
@ -104,27 +52,12 @@
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
];
},
handleClearData () {
this.data1 = [];
},
refreshData(){
let data = [];
for (let i = 0; i < 10; i++) {
data.push({
data1: Math.floor(Math.random () * 10000),
data2: Math.floor(Math.random () * 1000000),
data3: Math.floor(Math.random () * 100000000),
data4: Math.floor(Math.random () * Math.random () * 10000),
data5: Math.floor(Math.random () * Math.random () * 1000000),
data6: Math.floor(Math.random () * Math.random () * 100000000),
});
]
}
this.tableData1 = data;
},
changePage(){
this.refreshData();
methods: {
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
}
}
}

6
src/components/poptip/poptip.vue
View file

@ -97,6 +97,9 @@
transfer: {
type: Boolean,
default: false
},
popperClass: {
type: String
}
},
data () {
@ -120,7 +123,8 @@
return [
`${prefixCls}-popper`,
{
[`${prefixCls}-confirm`]: this.transfer && this.confirm
[`${prefixCls}-confirm`]: this.transfer && this.confirm,
[`${this.popperClass}`]: !!this.popperClass
}
];
},

2
src/components/table/cell.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="classes" ref="cell">
<template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
<template v-if="renderType === 'index'"><span>{{naturalIndex + 1}}</span></template>
<template v-if="renderType === 'selection'">
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template>

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

@ -23,6 +23,8 @@
v-if="isPopperShow(column)"
v-model="column._filterVisible"
placement="bottom"
popper-class="ivu-table-popper"
transfer
@on-popper-hide="handleFilterHide(column._index)">
<span :class="[prefixCls + '-filter']">
<i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>

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

@ -345,15 +345,13 @@
&-footer{
padding: 4px;
border-top: 1px solid @border-color-split;
overflow: hidden;
button:first-child{
float: left;
}
button:last-child{
float: right;
}
.ivu-poptip-popper{
min-width: 0;
text-align: left;
}
thead .ivu-poptip-popper{
.ivu-poptip-body{
padding: 0;
}
}
@ -371,3 +369,10 @@
visibility: hidden;
}
}
.ivu-table-popper{
min-width: 0;
text-align: left;
.ivu-poptip-body{
padding: 0;
}
}