Vue.js 中 el-input 标签的 @clear 属性详解

在 Vue.js 中，el-input 标签的 @clear 属性是一个事件，当用户点击 el-input 标签上的清除按钮时会触发该事件。'getUserList()' 是一个函数，当 @clear 事件被触发时，该函数会被调用。通常情况下，该函数用于清空或重新加载数据。

例如，你可能有一个输入框，用户可以在其中输入搜索条件。当用户点击清除按钮时，你希望清空输入框并重新加载所有数据。你可以使用 @clear 事件来实现这个功能。

代码示例：

<template>
  <el-input v-model='searchQuery' placeholder='搜索' clearable @clear='getUserList()'></el-input>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
    }
  },
  methods: {
    getUserList() {
      // 清空搜索条件并重新加载数据
      this.searchQuery = '';
      // ... 加载数据逻辑
    }
  }
}
</script>

解释：

• v-model='searchQuery' 将输入框的值绑定到 searchQuery 变量。
• clearable 属性表示显示清除按钮。
• @clear='getUserList()' 表示当用户点击清除按钮时调用 getUserList() 函数。

总结：

@clear 属性是一个方便的工具，可以让你在用户点击 el-input 标签的清除按钮时执行自定义操作。它可以用来清空输入框、重新加载数据、或者执行其他任何你需要的逻辑。