vue根据月日隐藏显示表格column某一列
时间: 2023-08-08 19:06:59 浏览: 115
您可以使用`v-if`指令和计算属性来实现根据月日隐藏显示表格某一列。首先,您需要将日期数据传递给计算属性,以便根据月日计算出应该显示哪些列。在模板中,您需要使用`v-if`指令来根据计算属性的结果来显示或隐藏表格列。
以下是一个示例代码:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th v-if="showColumn1">列1</th>
<th v-if="showColumn2">列2</th>
<<th v-if="showColumn3">列3</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.name }}</td>
<td v-if="showColumn1">{{ item.column1 }}</td>
<td v-if="showColumn2">{{ item.column2 }}</td>
<td v-if="showColumn3">{{ item.column3 }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
id: 1,
name: '张三',
column1: 'A',
column2: 'B',
column3: 'C',
date: '2022-01-01',
},
{
id: 2,
name: '李四',
column1: 'D',
column2: 'E',
column3: 'F',
date: '2022-02-01',
},
{
id: 3,
name: '王五',
column1: 'G',
column2: 'H',
column3: 'I',
date: '2022-03-01',
},
],
};
},
computed: {
showColumn1() {
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
const currentDateNumber = currentDate.getDate();
return currentMonth === 1 && currentDateNumber === 1; // 根据当前日期计算出是否应该显示第一列
},
showColumn2() {
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
const currentDateNumber = currentDate.getDate();
return currentMonth === 2 && currentDateNumber === 1; // 根据当前日期计算出是否应该显示第二列
},
showColumn3() {
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
const currentDateNumber = currentDate.getDate();
return currentMonth === 3 && currentDateNumber === 1; // 根据当前日期计算出是否应该显示第三列
},
},
};
</script>
```
在上面的代码中,我们使用了三个计算属性来控制是否显示每一列,每个计算属性根据当前日期计算出对应的列是否应该显示。在模板中,我们使用`v-if`指令来根据计算属性的结果来显示或隐藏表格列。
阅读全文