el-date-picker选中获取值实现方式
作者：用心去追梦
在ElementUI中使用el-date-picker组件获取用户选中的日期值,可以通过v-model双向数据绑定或者监听change事件来实现,需要注意的是,ElementUI可能不支持Vue3,需要使用ElementPlus或其他兼容Vue3的UI库
在使用 Element UI（一个基于 Vue 2.x 的桌面端组件库）中的 el-date-picker 组件时，如果你想要获取用户选中的日期值，
可以采用以下几种方法之一：
1. 使用 v-model
最简单的方式是通过双向数据绑定 v-model 将输入框的值与 Vue 实例中的某个数据属性绑定起来。
当用户选择了日期后，这个数据属性就会自动更新为所选的日期。
<template>
<el-date-picker
v-model="date"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: ''
};
}
};
</script>
在这个例子中，date 数据属性将会存储用户选择的日期。
2. 监听 change 事件
如果你需要在日期改变时执行某些操作，可以通过监听 el-date-picker 的 change 事件来实现。
<template>
<el-date-picker
v-model="date"
type="date"
placeholder="选择日期"
@change="handleDateChange">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: ''
};
},
methods: {
handleDateChange(value, dateString) {
console.log('Selected date:', value);
console.log('Formatted date string:', dateString);
}
}
};
</script>
这里，handleDateChange 方法会在每次日期选择改变时被调用，并且会接收到两个参数：
- 一个是用户选择的日期对象
value - 另一个是格式化后的日期字符串
dateString
3. 注意事项
- 如果你使用的是 Vue 3，那么 Element UI 可能不会直接支持 Vue 3，你需要查找 Element Plus 或其他兼容 Vue 3 的 UI 库来实现类似的功能。
- 确保你的 Vue 和 Element UI 版本是兼容的，并且已经正确安装和引入了相关组件。
总结
以上就是在 Element UI 中使用 el-date-picker 并获取所选日期的方法。
这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。