Added click and dblclick events to table

This commit is contained in:
Rijn 2017-01-02 19:05:45 -06:00
parent 2b67801dfb
commit da55375f00
3 changed files with 35 additions and 5 deletions

View file

@ -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);
}
}
};

View file

@ -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) {

View file

@ -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)
}
}
}