elemnet ui 联动选择器 如何清空其内容 然后还可以继续修改

在 Element UI 中，可以使用 `clearable` 属性来实现清空下拉框的内容。当该属性设置为 `true` 时，下拉框右侧会出现一个清空按钮，点击该按钮可以清空下拉框的内容。同时，我们可以使用 `v-model` 指令绑定下拉框的值，当下拉框的值发生变化时，`v-model` 绑定的值也会相应地更新。

例如，以下代码展示了如何在 Element UI 中实现一个可以清空内容的下拉框，并且清空后仍然可以继续进行修改：

<template>
  <div>
    <el-select v-model="selectedOption" clearable @clear="handleClear">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
      ],
    };
  },
  methods: {
    handleClear() {
      this.selectedOption = ''; // 清空下拉框的值
    },
  },
};
</script>

在上面的代码中，我们首先定义了一个下拉框 `selectedOption` 和它的选项列表 `options`。我们将 `clearable` 属性设置为 `true`，以便在下拉框右侧添加一个清空按钮。当用户点击清空按钮时，我们会调用 `handleClear` 方法，该方法会将 `selectedOption` 的值设置为空，从而清空下拉框的内容。需要注意的是，当下拉框的值发生变化时，`v-model` 绑定的值也会相应地更新。因此，当我们清空下拉框的内容后，`selectedOption` 的值也会变为空。这样，我们就可以实现一个可以清空内容的下拉框，并且清空后仍然可以继续进行修改。