想做这样一个效果,鼠标移入某一行的时候,让改行的操作按钮显示,怎么做某行的鼠标移入事件呢?
官方没有说明这个事件..
可以使用iView的Table组件的row-class-name属性来实现单元格鼠标移入事件。具体实现方法如下:
<template>
<Table :data="tableData" :row-class-name="rowClassName">
<TableColumn prop="name" label="姓名"></TableColumn>
<TableColumn prop="age" label="年龄"></TableColumn>
<TableColumn prop="address" label="地址"></TableColumn>
</Table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
]
}
},
methods: {
rowClassName(row, index) {
return 'row-class-name';
}
}
}
</script>
<style>
.row-class-name:hover {
background-color: #f5f5f5;
}
</style>
在上面的代码中,使用了row-class-name属性来指定每一行的class名称,然后在样式中使用:hover伪类来实现鼠标移入事件的效果。