vue中如果当前行的status字段为2,则隐藏当前行的审核操作按钮
时间: 2024-05-16 21:15:00 浏览: 115
vue根据条件不同显示不同按钮的操作
可以通过条件渲染的方式来实现,具体可以在模板中使用 `v-if` 或 `v-show` 指令来判断当前行的 `status` 字段是否为2,如果是则不渲染审核操作按钮。
假设我们有一个列表,每一行数据都有一个 `status` 字段,我们可以这样写:
```vue
<template>
<table>
<thead>
<tr>
<th>姓名</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.status }}</td>
<td>
<button v-if="item.status !== 2" @click="audit(item)">审核</button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: '张三', status: 1 },
{ id: 2, name: '李四', status: 2 },
{ id: 3, name: '王五', status: 1 },
],
};
},
methods: {
audit(item) {
// 审核操作
},
},
};
</script>
```
在模板中,我们使用了 `v-if` 指令来判断当前行的 `status` 字段是否为2,如果不是则渲染审核操作按钮,否则不渲染。这样就可以实现隐藏审核操作按钮的效果。
阅读全文