任务名称 状态 当前阶段 项目编号 项目名称 发起人 负责人 任务类型 计划开始时间 计划完成时间 鞍钢项目 待启动 策划设计 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利用vue生成一个表格
时间: 2023-11-25 12:05:44 浏览: 35
可以使用 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>
```
这样就可以在页面上展示一个带有数据的表格了。