在Vue2与Element UI的环境下,你可以创建一个组件来展示这样的动态表格。以下是一个基本的实现示例:
1. 安装Element UI
确保你已经安装了Element UI,如果没有,请通过以下命令进行安装:
npm install element-ui --save
并在你的main.js
文件中引入并使用Element UI:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2. 创建Vue组件
接下来,创建一个名为DynamicTable.vue
的文件,并编写以下代码:
<template>
<el-table :data="formattedData" stripe border>
<el-table-column prop="statDate" label="日期"></el-table-column>
<el-table-column prop="name" label="名字"></el-table-column>
<el-table-column prop="cnt" label="数量"></el-table-column>
<el-table-column v-for="(cust, index) in maxCusts" :key="index" :label="`用户${index + 1} collCnt`">
<template slot-scope="scope">
{{ scope.row.custList[index] ? scope.row.custList[index].collCnt : '-' }}
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'DynamicTable',
props: {
tableData: {
type: Array,
required: true
}
},
computed: {
formattedData() {
// 确定最大的custList长度
this.maxCusts = Math.max(...this.tableData.map(item => item.custList.length));
return this.tableData;
}
},
data() {
return {
maxCusts: 0 // 初始化最大用户数为0
};
}
};
</script>
3. 在父组件中使用
在你的父组件中,你将从后端获取的数据传递给这个DynamicTable
组件。
<template>
<div>
<dynamic-table :table-data="jsonData.rows"></dynamic-table>
</div>
</template>
<script>
import DynamicTable from './DynamicTable.vue';
export default {
components: {
DynamicTable
},
data() {
return {
jsonData: { /* 这里放置你从后端获取的JSON数据 */ }
};
}
};
</script>
这样,你就创建了一个可以动态根据后端返回的JSON数据生成表格的Vue组件,且能够根据custList
中用户的数量动态显示对应的collCnt
数据。注意,如果某行数据的custList
长度小于最大长度,则显示为-
。