el-table表头是一维数组,表格内容是多维数组,且每个一维数组,是一行的数据,如何重组为el-table的数据格式
时间: 2024-03-12 21:47:35 浏览: 176
如果表头和表格内容分别是一维数组和多维数组,可以使用以下代码将其重组为 el-table 的数据格式:
```javascript
const header = ['', '2016', '2017']; // 表头
const content = [
['各客户', '1', '2'],
['数量', '10', '20'],
['金额', '1000', '2000']
]; // 表格内容
// 生成表头信息
const columns = header.map(item => ({
label: item,
prop: item
}));
// 生成表格内容信息
const data = content.slice(1).map(row => {
const obj = {};
for(let i = 0; i < header.length; i++) {
obj[header[i]] = row[i];
}
return obj;
});
// 组装成 el-table 的数据格式
const tableData = {
columns,
data
};
```
在上面的代码中,先将表头和表格内容分别存储在 `header` 和 `content` 变量中。然后通过 `header` 数组生成 el-table 的表头信息 `columns`,对于每个表头信息,都设置了 `label` 和 `prop` 属性。接着,通过 `content` 数组生成 el-table 的表格内容信息 `data`,对于每一行数据,都生成了一个对象,对象的属性名对应表头的 `prop` 值,属性值对应表格内容中的数据。最后将 `columns` 和 `data` 组装成 el-table 的数据格式 `tableData`,即可在 el-table 中使用。
阅读全文