Elementui Calendar 日历可拖动选择日期

在 Element UI 的 Calendar 组件中，可以通过设置 selectable 属性来实现日期的拖动选择。此外，你还需要监听 select-range 事件以获取选中的日期范围。

以下是一个简单的例子，展示了如何使用 Element UI 的 Calendar 组件实现日期的拖动选择：

<template>
  <el-calendar v-model="range" @select-range="handleSelectRange" selectable="range"></el-calendar>
</template>
 
<script>
export default {
  data() {
    return {
      range: {}
    };
  },
  methods: {
    handleSelectRange(range) {
      console.log('Selected range:', range);
      // 处理选中的日期范围
    }
  }
};
</script>

在这个例子中，range 用于双向绑定日历组件的选中状态，handleSelectRange 方法用于处理选中的日期范围。selectable="range" 属性使得日期可以被拖动选择。当用户拖动选择日期范围时，select-range 事件会被触发，并调用 handleSelectRange 方法。