el-table表头是一维数组,表格内容是多维数组,且每个一维数组,是一行的数据,如何重组为el-table的数据格式并用vue写入el-table中
时间: 2023-10-17 21:25:10 浏览: 171
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
可以使用以下代码将表头和表格内容重组为 el-table 的数据格式,并将其渲染到 el-table 中:
```html
<template>
<div>
<el-table :data="tableData.data" :columns="tableData.columns"></el-table>
</div>
</template>
<script>
export default {
data() {
return {
header: ['', '2016', '2017'], // 表头
content: [
['各客户', '1', '2'],
['数量', '10', '20'],
['金额', '1000', '2000']
] // 表格内容
};
},
computed: {
tableData() {
// 生成表头信息
const columns = this.header.map(item => ({
label: item,
prop: item
}));
// 生成表格内容信息
const data = this.content.slice(1).map(row => {
const obj = {};
for (let i = 0; i < this.header.length; i++) {
obj[this.header[i]] = row[i];
}
return obj;
});
// 组装成 el-table 的数据格式
return {
columns,
data
};
}
}
};
</script>
```
在上面的代码中,通过将表头和表格内容存储在 `header` 和 `content` 变量中,并在 `computed` 中计算出 `tableData`,即可在 el-table 中使用。在 `tableData` 的计算过程中,先将表头和表格内容重组为 el-table 的数据格式,然后返回 `columns` 和 `data` 组成的对象。最后在 el-table 中,通过 `:data` 和 `:columns` 分别绑定 `tableData.data` 和 `tableData.columns` 即可。
阅读全文