iview 怎么给table组件 单元行做鼠标移入事件的

Question

想做这样一个效果，鼠标移入某一行的时候，让改行的操作按钮显示，怎么做某行的鼠标移入事件呢？
官方没有说明这个事件..

Answer 1

可以使用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伪类来实现鼠标移入事件的效果。