可以使用 Vue 的表格组件来生成表格，具体步骤如下：
1. 在 HTML 文件中引入 Vue 和表格组件：
```html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tables-2"></script>
```
2. 在 Vue 实例中注册表格组件并配置数据：
```javascript
new Vue({
el: '#app',
data: {
columns: ['任务名称', '状态', '当前阶段', '项目编号', '项目名称', '发起人', '负责人', '任务类型', '计划开始时间', '计划完成时间'],
rows: [
{
'任务名称': '鞍钢项目',
'状态': '待启动',
'当前阶段': '策划设计',
'项目编号': 'AG
20220803',
'项目名称': '鞍钢项目',
'发起人': '王晓雷',
'负责人': '王晓雷',
'任务类型': '项目任务',
'计划开始时间': '2023.03.10',
'计划完成时间': '2023.06.20'
},
{
'任务名称': '主师策划设计',
'状态': '待启动',
'当前阶段': '策划设计',
'项目编号': 'AG
20220803',
'项目名称': '鞍钢项目',
'发起人': '王晓雷',
'负责人': '王晓雷',
'任务类型': '设计任务',
'计划开始时间': '2023.03.10',
'计划完成时间': '2023.06.20'
},
{
'任务名称': '车体方案设计',
'状态': '待启动',
'当前阶段': '方案设计',
'项目编号': 'AG
20220803',
'项目名称': '鞍钢项目',
'发起人': '王晓雷',
'负责人': '王铁峰',
'任务类型': '设计任务',
'计划开始时间': '2023.03.10',
'计划完成时间': '2023.06.20'
},
{
'任务名称': '三新清单校核',
'状态': '待审阅',
'当前阶段': '策划设计',
'项目编号': 'AG
20220803',
'项目名称': '鞍钢项目',
'发起人': '王铁峰',
'负责人': '徐德山',
'任务类型': '校核任务',
'计划开始时间': '2023.03.10',
'计划完成时间': '2023.03.12'
}
]
},
components: {
'v-table': VueTables.VTable,
'v-th': VueTables.VTh,
'v-tr': VueTables.VTr,
'v-td': VueTables.VTd
}
})
```
3. 在 HTML 文件中使用表格组件：
```html
<div id="app">
<v-table :columns="columns" :rows="rows">
<template slot="thead-top">
<tr>
<th colspan="10" class="text-center">任务列表</th>
</tr>
</template>
<v-th></v-th>
<v-tr slot="row" slot-scope="data">
<v-td v-for="(value, key) in data.row">{{ value }}</v-td>
</v-tr>
</v-table>
</div>
```
这样就可以在页面上展示一个带有数据的表格了。
扫一扫
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
