Added click and dblclick events to table
This commit is contained in:
parent
2b67801dfb
commit
da55375f00
3 changed files with 35 additions and 5 deletions
|
@ -9,7 +9,8 @@
|
||||||
:class="rowClasses(row._index)"
|
:class="rowClasses(row._index)"
|
||||||
@mouseenter.stop="handleMouseIn(row._index)"
|
@mouseenter.stop="handleMouseIn(row._index)"
|
||||||
@mouseleave.stop="handleMouseOut(row._index)"
|
@mouseleave.stop="handleMouseOut(row._index)"
|
||||||
@click.stop="highlightCurrentRow(row._index)">
|
@click.stop="clickCurrentRow(row._index)"
|
||||||
|
@dblclick.stop="dblclickCurrentRow(row._index)">
|
||||||
<td v-for="column in columns" :class="alignCls(column)">
|
<td v-for="column in columns" :class="alignCls(column)">
|
||||||
<Cell
|
<Cell
|
||||||
:fixed="fixed"
|
:fixed="fixed"
|
||||||
|
@ -66,8 +67,11 @@
|
||||||
handleMouseOut (_index) {
|
handleMouseOut (_index) {
|
||||||
this.$parent.handleMouseOut(_index);
|
this.$parent.handleMouseOut(_index);
|
||||||
},
|
},
|
||||||
highlightCurrentRow (_index) {
|
clickCurrentRow (_index) {
|
||||||
this.$parent.highlightCurrentRow(_index);
|
this.$parent.clickCurrentRow(_index);
|
||||||
|
},
|
||||||
|
dblclickCurrentRow (_index) {
|
||||||
|
this.$parent.dblclickCurrentRow(_index);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -297,6 +297,14 @@
|
||||||
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
|
const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
|
||||||
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData);
|
this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData);
|
||||||
},
|
},
|
||||||
|
clickCurrentRow (_index) {
|
||||||
|
this.highlightCurrentRow (_index);
|
||||||
|
this.$emit('on-click', JSON.parse(JSON.stringify(this.data[_index])));
|
||||||
|
},
|
||||||
|
dblclickCurrentRow (_index) {
|
||||||
|
this.highlightCurrentRow (_index);
|
||||||
|
this.$emit('on-dblclick', JSON.parse(JSON.stringify(this.data[_index])));
|
||||||
|
},
|
||||||
getSelection () {
|
getSelection () {
|
||||||
let selectionIndexes = [];
|
let selectionIndexes = [];
|
||||||
for (let i in this.objData) {
|
for (let i in this.objData) {
|
||||||
|
|
|
@ -1,7 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<i-button @click="changeFilter">改变filter</i-button>
|
<i-button @click="changeFilter">改变filter</i-button>
|
||||||
|
<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>
|
||||||
<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
|
<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
|
||||||
<i-table border :columns="columns6" :data="data5"></i-table>
|
<i-table
|
||||||
|
border
|
||||||
|
:columns="columns6"
|
||||||
|
:data="data5"
|
||||||
|
:highlight-row="true"
|
||||||
|
@on-current-change="onCurrentChange"
|
||||||
|
@on-dblclick="onDblclick">
|
||||||
|
</i-table>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
@ -99,7 +107,8 @@
|
||||||
date: '2016-10-04',
|
date: '2016-10-04',
|
||||||
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
currentRow: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -113,6 +122,15 @@
|
||||||
},
|
},
|
||||||
switchCellEllipsis (status) {
|
switchCellEllipsis (status) {
|
||||||
this.columns6[5].ellipsis = status
|
this.columns6[5].ellipsis = status
|
||||||
|
},
|
||||||
|
onClick (data) {
|
||||||
|
window.alert('Click ' + data.name)
|
||||||
|
},
|
||||||
|
onCurrentChange (data) {
|
||||||
|
this.currentRow = data
|
||||||
|
},
|
||||||
|
onDblclick (data) {
|
||||||
|
window.alert('Double Click ' + data.name)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue