可以使用
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: [
{
'任务名称': '鞍钢项目',
'状态': '待启动',
'当前阶段': '策划设计',
'项目编号': 'AG20220803',
'项目名称': '鞍钢项目',
'发起人': '王晓雷',
'负责人': '王晓雷',
'任务类型': '项目任务',
'计划开始时间': '
2023.03.10',
'计划完成时间': '
2023.
06.20'
},
{
'任务名称': '主师策划设计',
'状态': '待启动',
'当前阶段': '策划设计',
'项目编号': 'AG20220803',
'项目名称': '鞍钢项目',
'发起人': '王晓雷',
'负责人': '王晓雷',
'任务类型': '设计任务',
'计划开始时间': '
2023.03.10',
'计划完成时间': '
2023.
06.20'
},
{
'任务名称': '车体方案设计',
'状态': '待启动',
'当前阶段': '方案设计',
'项目编号': 'AG20220803',
'项目名称': '鞍钢项目',
'发起人': '王晓雷',
'负责人': '王铁峰',
'任务类型': '设计任务',
'计划开始时间': '
2023.03.10',
'计划完成时间': '
2023.
06.20'
},
{
'任务名称': '三新清单校核',
'状态': '待审阅',
'当前阶段': '策划设计',
'项目编号': 'AG20220803',
'项目名称': '鞍钢项目',
'发起人': '王铁峰',
'负责人': '徐德山',
'任务类型': '校核任务',
'计划开始时间': '
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>
```
这样就可以在页面上展示一个带有数据的表格了。
220
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
