update Table
update Table
This commit is contained in:
梁灏
parent
b8a4300003
commit
52874e27e5
7 changed files with 70 additions and 13 deletions
|
|
@ -5,7 +5,7 @@
|
|||
</colgroup>
|
||||
<tbody :class="[prefixCls + '-tbody']">
|
||||
<tr
|
||||
v-for="(index, row) in data"
|
||||
v-for="(index, row) in cloneData"
|
||||
:class="rowClasses(row, index)"
|
||||
@mouseenter.stop="handleMouseIn(index)"
|
||||
@mouseleave.stop="handleMouseOut(index)"
|
||||
|
|
@ -34,7 +34,6 @@
|
|||
prefixCls: String,
|
||||
style: Object,
|
||||
columns: Array,
|
||||
data: Array,
|
||||
cloneData: Array,
|
||||
fixed: Boolean
|
||||
},
|
||||
|
|
@ -53,7 +52,7 @@
|
|||
return this.$parent.setCellWidth(column, index);
|
||||
},
|
||||
rowClsName (index) {
|
||||
return this.$parent.rowClassName(this.data[index], index);
|
||||
return this.$parent.rowClassName(this.cloneData[index], index);
|
||||
},
|
||||
handleMouseIn (index) {
|
||||
this.$parent.handleMouseIn(index);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,13 @@
|
|||
<th v-for="column 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-else>{{{ renderHeader(column, $index) }}}</template>
|
||||
<template v-else>
|
||||
{{{ renderHeader(column, $index) }}}
|
||||
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
|
||||
<i class="ivu-icon ivu-icon-arrow-up-b" @click="handleSortAsc($index)"></i>
|
||||
<i class="ivu-icon ivu-icon-arrow-down-b" @click="handleSortDesc($index)"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -57,6 +63,12 @@
|
|||
selectAll () {
|
||||
const status = !this.isSelectAll;
|
||||
this.$parent.selectAll(status);
|
||||
},
|
||||
handleSortAsc (index) {
|
||||
this.$parent.handleSort(index, 'asc');
|
||||
},
|
||||
handleSortDesc (index) {
|
||||
this.$parent.handleSort(index, 'desc');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:style="tableStyle"
|
||||
:columns="cloneColumns"
|
||||
:data="data"
|
||||
:clone-data="cloneData"></table-body>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-fixed']">
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:style="fixedTableStyle"
|
||||
:columns="leftFixedColumns"
|
||||
:data="data"
|
||||
:clone-data="cloneData"></table-body>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,7 +49,6 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:style="fixedRightTableStyle"
|
||||
:columns="rightFixedColumns"
|
||||
:data="data"
|
||||
:clone-data="cloneData"></table-body>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -269,9 +266,11 @@
|
|||
});
|
||||
this.cloneData = tmpData;
|
||||
|
||||
const selection = this.getSelection();
|
||||
if (status) {
|
||||
this.$emit('on-select-all', this.getSelection());
|
||||
this.$emit('on-select-all', selection);
|
||||
}
|
||||
this.$emit('on-selection-change', selection);
|
||||
},
|
||||
fixedHeader () {
|
||||
if (!!this.height) {
|
||||
|
|
@ -315,6 +314,13 @@
|
|||
} else {
|
||||
$body.scrollLeft = $body.scrollLeft - 10;
|
||||
}
|
||||
},
|
||||
handleSort (index, type) {
|
||||
if (type === 'asc') {
|
||||
|
||||
} else if (type === 'desc') {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 1px 0 8px #d3d4d6;
|
||||
box-shadow: @shadow-right;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::before {
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
box-shadow: -1px 0 8px #d3d4d6;
|
||||
box-shadow: @shadow-left;
|
||||
}
|
||||
&-fixed-header{
|
||||
overflow: hidden;
|
||||
|
|
@ -227,4 +227,8 @@
|
|||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&-sort{
|
||||
.sortable();
|
||||
}
|
||||
}
|
||||
33
src/styles/mixins/caret.less
Normal file
33
src/styles/mixins/caret.less
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// sortable
|
||||
.sortable() {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
margin-left: 4px;
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
height: 6px;
|
||||
line-height: 6px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
color: @btn-disable-color;
|
||||
transition: color @transition-time @ease-in-out;
|
||||
|
||||
&:hover{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
top: 0;
|
||||
}
|
||||
&:last-child{
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,3 +12,4 @@
|
|||
@import "content"; // card、modal
|
||||
@import "tooltip";
|
||||
@import "select";
|
||||
@import "caret";
|
||||
|
|
@ -9,8 +9,9 @@
|
|||
<br>
|
||||
<i-table
|
||||
width="450"
|
||||
height="200"
|
||||
:height="height"
|
||||
stripe
|
||||
border
|
||||
highlight-row
|
||||
:show-header="true"
|
||||
:columns="columns"
|
||||
|
|
@ -55,6 +56,7 @@
|
|||
key: 'age',
|
||||
align: 'right',
|
||||
// fixed: 'left',
|
||||
sortable: true,
|
||||
width: 100
|
||||
// render (row) {
|
||||
// return `<i-button>${row.age}</i-button>`
|
||||
|
|
@ -80,7 +82,7 @@
|
|||
fixed: 'right',
|
||||
width: 120,
|
||||
render (row, column, index) {
|
||||
return `<i-button @click="edit(${index})">${row.name}</i-button>`
|
||||
return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`
|
||||
// return `<a>${row.name}</a>`
|
||||
}
|
||||
}
|
||||
|
|
@ -153,7 +155,6 @@
|
|||
// this.columns[2].width = 150;
|
||||
// return;
|
||||
// this.height = 150;
|
||||
// return
|
||||
// this.data.push({
|
||||
// name: '刘天娇2',
|
||||
// age: 272,
|
||||
|
|
@ -161,6 +162,7 @@
|
|||
// edit: false
|
||||
// });
|
||||
// this.data.splice(1, 1)
|
||||
// this.columns.splice(2,1)
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue