
<template>
<div class="extra-item" v-for="(time,index) in nextTimeList" :key="time.id">
<a
:class="{active:index === isActive}"
href="javascript:void(0)"
id="chooseTime"
@click="changeItem(index)"
>
{{item.name}}
</a>
</div>
<a-range-picker
:value="userTime" // 绑定value
:disabled-date="disabledDate"
:style="{width: '256px'}"
@change="onChangeUserTime"
/>
</template>
<script>
export default {
data() {
userTime: null,
nextTimeList: [
{id: 1, name: '最近7天'},
{id: 2, name: '最近30天'},
{id: 3, name: '全部'}
]
},
methods: {
changeItem(id) {
this.userTime = [];
},
onChangeUserTime(date, dateString) {
this.userTime = date;
}
}
}
</script>
<style>
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
color: black;
}
.active {
text-decoration: none;
color: #1890ff;
}
}
</style>