VUE表格显示怎么让数据没有时就不显示这一列
时间: 2023-06-07 13:11:42 浏览: 61
您好!关于您的问题,您可以使用 VUE 的 v-if 指令来实现针对某列数据为空时不展示该列。具体实现方法如下:
```
<template>
<table>
<thead>
<tr>
<th v-if="data.length > 0">名称</th>
<th v-if="data.length > 0">类型</th>
<th v-if="data.length > 0">数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td v-if="data.length > 0">{{ item.name }}</td>
<td v-if="data.length > 0">{{ item.type }}</td>
<td v-if="data.length > 0">{{ item.quantity }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
data: [] // 假设该表格的数据来源于父组件传入的 data 数据
}
}
}
</script>
```
以上代码中,我们先在表头中使用 v-if 指令判断数据长度是否大于 0,如果是,则展示该列;如果不是,则不展示该列。在表格主体中,我们通过 v-for 指令来遍历数据列表,同时在每一列的数据前,使用 v-if 指令同样判断数据是否为空,如果不为空,则展示该列的数据;否则不展示该列的数据。
希望能够解答您的问题,如果还有任何疑问,欢迎继续提问哦!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)