elementui中日期选择组件 el-date-picker 点击 × 清空所选时间，会将model绑定的值设置为null

作者：System 时间：2024年08月27日分类：所有,elementui 字数：609

这篇文章距离上次修改已过249天，其中的内容可能已经有所变动。

在Element UI的el-date-picker组件中，如果你想要在清除日期（点击输入框中的×）时，同时清空绑定到model的值，你可以监听el-date-picker的change事件，并在事件处理函数中进行处理。

以下是一个简单的例子：

<template>
  <el-date-picker
    v-model="date"
    @change="handleDateChange"
    clearable
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  },
  methods: {
    handleDateChange(value) {
      if (value === null) {
        this.date = '';
      }
    }
  }
};
</script>

在这个例子中，当用户点击日期选择器中的×按钮以清除选择时，handleDateChange方法会被调用，并且传入的参数是null。我们通过检查这个参数，并将绑定的date模型设置为一个空字符串，来实现清空绑定值的目的。

elementui中日期选择组件 el-date-picker 点击 × 清空所选时间，会将model绑定的值设置为null

评论已关闭

推荐阅读