一键收放el-table展开行，更便于数据查看

一键收放 Element UI 表格展开行

简介

在 Element UI 中，表格组件（el-table）提供了展开行功能，方便查看更多数据。默认情况下，展开行只能通过点击左侧箭头图标来控制，但有时候，我们希望通过点击行的其他部分来收放展开行。本文将介绍如何实现一键收放展开行。

实现原理

要实现一键收放展开行，我们需要结合使用 row-click 和 expand-change 事件。row-click 事件会在点击行的任何部分时触发，而 expand-change 事件会在展开或收缩展开行时触发。我们可以通过在 el-table 组件上添加 row-click 事件监听器来实现一键收放展开行。

当 row-click 事件触发时，我们可以使用 expand-row-keys 属性来控制展开行的收缩。

代码示例

<el-table :data="tableData" row-key="id" @row-click="handleRowClick" :expand-row-keys="expandRowKeys">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    width="200"
    show-overflow-tooltip
  ></el-table-column>
  <el-table-column label="详细信息">
    <template slot-scope="scope">
      <el-button @click="handleExpandClick(scope.$index)">
        {{ scope.row.expanded ? '收起' : '展开' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>

import { ref } from 'vue'

export default {
  setup() {
    const tableData = ref([
      {
        id: 1,
        name: 'John Doe',
        age: 30,
        address: '123 Main Street',
        expanded: false,
      },
      {
        id: 2,
        name: 'Jane Smith',
        age: 25,
        address: '456 Elm Street',
        expanded: false,
      },
      {
        id: 3,
        name: 'Michael Jones',
        age: 40,
        address: '789 Oak Street',
        expanded: false,
      },
    ])
    const expandRowKeys = ref([])

    const handleRowClick = (row, column, event) => {
      const index = tableData.value.findIndex(item => item.id === row.id)
      expandRowKeys.value = [index]
    }

    const handleExpandClick = (index) => {
      const row = tableData.value[index]
      row.expanded = !row.expanded
      if (row.expanded) {
        expandRowKeys.value = [index]
      } else {
        expandRowKeys.value = []
      }
    }

    return {
      tableData,
      expandRowKeys,
      handleRowClick,
      handleExpandClick,
    }
  },
}

步骤详解

1. 定义一个 el-table 组件，并添加 row-click 事件监听器。
2. 在 row-click 事件处理函数中，使用 expand-row-keys 属性来控制展开行的收缩。
3. 定义一个 handleExpandClick 方法，该方法会在点击展开行按钮时触发。
4. 在 handleExpandClick 方法中，切换展开行的 expanded 属性并更新 expand-row-keys 数组。

通过遵循这些步骤，即可轻松实现一键收放展开行。

常见问题解答

1. 问：如何只通过点击表格行来展开或收缩展开行，而不需要点击展开行按钮？

   答： 可以在 el-table 组件上设置 default-expand-all 属性为 true。这将导致所有行在初始加载时展开。

2. 问：如何通过编程方式展开或收缩特定的展开行？

   答： 可以使用 expand-change 事件来监听展开行的变化。然后，可以在事件处理函数中使用 expand-row-keys 属性来展开或收缩特定的展开行。

3. 问：如何禁用展开行功能？

   答： 可以在 el-table 组件上设置 expand-row 属性为 false 来禁用展开行功能。

4. 问：如何在展开行中显示自定义内容？

   答： 可以在 el-table-column 中使用 scoped slot 来在展开行中显示自定义内容。

5. 问：展开行可以嵌套吗？

   答： 不可以，展开行不能嵌套。