elementUi el-calendar日历组件使用方法
Element UI的el-calendar组件用于展示日历，并允许用户选择日期范围。以下是如何使用el-calendar组件的基本示例：
- 首先确保你已经在项目中安装并引入了Element UI。
- 在你的Vue组件中，你可以这样使用
el-calendar组件：
<template>
<el-calendar v-model="value" @change="handleDateChange"></el-calendar>
</template>
<script>
export default {
data() {
return {
value: new Date() // 设置当前日期
};
},
methods: {
handleDateChange(val) {
console.log('Selected Date:', val);
}
}
};
</script>在这个例子中，v-model用于双向绑定所选日期。@change事件监听日期变化，并在控制台输出选中的日期。你可以通过修改value数据属性来控制日历的显示月份。
Element UI的el-calendar组件还支持自定义日历内容和属性，具体可以查看Element UI官方文档了解更多信息。
评论已关闭