实现表格中可展开行的动态组件,可以使用Vue.js或React等前端框架来完成。下面分别给出Vue.js和React的代码示例:
标题1
标题2
操作
{{ item.title1 }}
{{ item.title2 }}
{{ item.content }}
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 (
标题1
标题2
操作
{dataSource.map((item, index) => (
{item.title1}
{item.title2}
{expandedRows.includes(index) && (
{/* 展开内容 */}
{item.content}
)}
))}
);
};
export default Table;
以上代码示例中,通过维护一个保存已展开行索引的数组(expandedRows
),点击按钮时切换展开状态,并根据展开状态决定是否显示展开内容。
上一篇:表格中可以放置特殊字符吗?
下一篇:表格中空单元格的背景颜色不显示