el-table 表格鼠标滑过 expand 关闭

您可以使用以下方式来实现鼠标滑过 el-table 表格行时展开和关闭的效果：

1. 在 el-table 组件中添加 :row-class-name="tableRowClassName" 属性，它会为每一行添加一个 class 名称，用于自定义该行的样式。

2. 在 Vue 实例中定义 tableRowClassName 方法，它会根据行数据和行索引返回一个 class 名称，用于控制该行的样式。在这个方法中，你可以判断当前行是否展开，如果是则返回一个特定的 class 名称，否则返回空字符串。

3. 在 el-table 组件中添加 @mouseenter 和 @mouseleave 事件监听器，用于在鼠标滑过和离开表格行时触发相应的方法。

4. 在 Vue 实例中定义 handleRowMouseEnter 和 handleRowMouseLeave 方法，它们会根据传入的行索引和事件类型来展开或关闭该行。

下面是一个示例代码：

<el-table :data="tableData" :row-class-name="tableRowClassName" @mouseenter="handleRowMouseEnter" @mouseleave="handleRowMouseLeave">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, expanded: false },
        { name: 'Mary', age: 25, expanded: false },
        { name: 'Tom', age: 30, expanded: false }
      ]
    }
  },
  methods: {
    tableRowClassName({ row }) {
      return row.expanded ? 'expanded-row' : ''
    },
    handleRowMouseEnter(index) {
      this.expandRow(index)
    },
    handleRowMouseLeave(index) {
      this.collapseRow(index)
    },
    expandRow(index) {
      this.$set(this.tableData[index], 'expanded', true)
    },
    collapseRow(index) {
      this.$set(this.tableData[index], 'expanded', false)
    }
  }
}

在上面的代码中，我们在表格数据中添加了一个 expanded 属性来标记每行是否展开。在 tableRowClassName 方法中，我们根据该属性返回了一个特定的 class 名称，用于控制行的样式。

在 handleRowMouseEnter 和 handleRowMouseLeave 方法中，我们根据传入的行索引来调用 expandRow 或 collapseRow 方法，从而展开或关闭该行。在这些方法中，我们使用 Vue.set 方法来更新 tableData 中的数据，以便触发响应式更新。