关于点击外部按钮清除(vue ant-design <a-range-picker>)数据

245 阅读1分钟

     <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; // 将值赋给userTime
            }
         }
       }
     </script>
     <style>
        .extra-item {
          display: inline-block;
          margin-right: 24px;

          a {
            margin-left: 24px;
            color: black;
          }
          .active {
            text-decoration: none;
            color: #1890ff;
          }
      }
     </style>