Vue.js项目中利用Element-UI el-table实现行点击展开/收起子内容：row-click事件与状态变量应用

一、引言

二、问题分析

三、解决方案

1. 获取当前被点击的行数据

<template>
  <div>
    <el-table :data="tableData" @row-click="handleRowClick">
      <!-- 表格列定义省略 -->
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据省略
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      console.log('点击了第', row.index, '行')
      // 这里可以根据row获取到具体的行数据
    }
  }
}
</script>

2. 修改该行的状态，使其可以展示子内容

<template>
  <div>
    <el-table :data="tableData" :expand-row-keys="expandedKeys" @row-click="handleRowClick">
      <!-- 表格列定义省略 -->
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据省略
      ],
      expandedKeys: [] // 存储已展开的行索引
    }
  },
  methods: {
    handleRowClick(row) {
      console.log('点击了第', row.index, '行')
      this.expandedKeys = [...this.expandedKeys] // 先复制一份expandedKeys数组
      if (this.expandedKeys.includes(row.index)) { // 如果已经展开，则收起
        this.expandedKeys.splice(this.expandedKeys.indexOf(row.index), 1)
      } else { // 否则展开
        this.expandedKeys.push(row.index)
      }
    }
  }
}
</script>

四、总结