只有状态为2 的有2级状态 正在处理团组列表 查询状态为2的 有二级状态2.1,2.2,2.3,2.4 显示二级状态 全部团组列表 查状态为3,8,6,2的如果状态为2的有二级状态 显示二级状态,没有显示一级状态vue代码
时间: 2024-03-08 16:48:57 浏览: 41
二级列表,一级头部会置顶.
根据您的描述,可以使用以下的 Vue 代码实现您的需求:
```
<template>
<div>
<h3>团组列表</h3>
<table>
<thead>
<tr>
<th>团组名称</th>
<th>状态</th>
<th>二级状态</th>
</tr>
</thead>
<tbody>
<tr v-for="group in groups" :key="group.id">
<td>{{ group.name }}</td>
<td>{{ group.status }}</td>
<td v-if="group.status === 2">{{ group.secondaryStatus }}</td>
<td v-else>{{ group.primaryStatus }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
groups: [
{ id: 1, name: '团组1', status: 3, primaryStatus: '一级状态1', secondaryStatus: '二级状态1.1' },
{ id: 2, name: '团组2', status: 2, primaryStatus: '一级状态2', secondaryStatus: '二级状态2.1' },
{ id: 3, name: '团组3', status: 2, primaryStatus: '一级状态2', secondaryStatus: '二级状态2.2' },
{ id: 4, name: '团组4', status: 8, primaryStatus: '一级状态4', secondaryStatus: null },
{ id: 5, name: '团组5', status: 6, primaryStatus: '一级状态5', secondaryStatus: null },
]
}
}
}
</script>
```
在上面的代码中,我们使用了一个表格来展示团组列表,其中包括团组名称、状态、一级状态和二级状态。当状态为2时,我们展示二级状态,否则展示一级状态。另外,我们使用 v-for 指令来循环遍历团组列表,并使用 v-if 和 v-else 指令来判断状态和展示对应的状态信息。希望这个代码能够帮助到您。
阅读全文