表格中可展开行的动态组件

实现表格中可展开行的动态组件，可以使用Vue.js或React等前端框架来完成。下面分别给出Vue.js和React的代码示例：

1. 使用Vue.js实现可展开行的动态组件：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>标题1</th>
          <th>标题2</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataSource" :key="index">
          <td>{{ item.title1 }}</td>
          <td>{{ item.title2 }}</td>
          <td>
            <button @click="toggleExpand(index)">
              {{ expandedRows.includes(index) ? '收起' : '展开' }}
            </button>
          </td>
        </tr>
        <tr v-for="(item, index) in dataSource" :key="'expand-' + index" v-show="expandedRows.includes(index)">
          <td :colspan="3">
            <!-- 展开内容 -->
            <div>{{ item.content }}</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { title1: '标题1', title2: '标题2', content: '展开内容1' },
        { title1: '标题1', title2: '标题2', content: '展开内容2' },
        // 更多数据...
      ],
      expandedRows: [] // 保存已展开的行的索引
    };
  },
  methods: {
    toggleExpand(index) {
      if (this.expandedRows.includes(index)) {
        this.expandedRows = this.expandedRows.filter((rowIndex) => rowIndex !== index);
      } else {
        this.expandedRows.push(index);
      }
    }
  }
};
</script>

2. 使用React实现可展开行的动态组件：

import React, { useState } from 'react';

const Table = () => {
  const [dataSource, setDataSource] = useState([
    { title1: '标题1', title2: '标题2', content: '展开内容1' },
    { title1: '标题1', title2: '标题2', content: '展开内容2' },
    // 更多数据...
  ]);
  const [expandedRows, setExpandedRows] = useState([]);

  const toggleExpand = (index) => {
    if (expandedRows.includes(index)) {
      setExpandedRows(expandedRows.filter((rowIndex) => rowIndex !== index));
    } else {
      setExpandedRows([...expandedRows, index]);
    }
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {dataSource.map((item, index) => (
            <React.Fragment key={index}>
              <tr>
                <td>{item.title1}</td>
                <td>{item.title2}</td>
                <td>
                  <button onClick={() => toggleExpand(index)}>
                    {expandedRows.includes(index) ? '收起' : '展开'}
                  </button>
                </td>
              </tr>
              {expandedRows.includes(index) && (
                <tr>
                  <td colSpan={3}>
                    {/* 展开内容 */}
                    <div>{item.content}</div>
                  </td>
                </tr>
              )}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

以上代码示例中，通过维护一个保存已展开行索引的数组（expandedRows），点击按钮时切换展开状态，并根据展开状态决定是否显示展开内容。