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)"
|
||||
@mouseenter.stop="handleMouseIn(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)">
|
||||
<Cell
|
||||
:fixed="fixed"
|
||||
|
@ -66,8 +67,11 @@
|
|||
handleMouseOut (_index) {
|
||||
this.$parent.handleMouseOut(_index);
|
||||
},
|
||||
highlightCurrentRow (_index) {
|
||||
this.$parent.highlightCurrentRow(_index);
|
||||
clickCurrentRow (_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]));
|
||||
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 () {
|
||||
let selectionIndexes = [];
|
||||
for (let i in this.objData) {
|
||||
|
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<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
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
|
@ -99,7 +107,8 @@
|
|||
date: '2016-10-04',
|
||||
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
||||
}
|
||||
]
|
||||
],
|
||||
currentRow: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -113,6 +122,15 @@
|
|||
},
|
||||
switchCellEllipsis (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