Vue3+ElementUI使用el-select multiple 单选或多选后点击编辑后回显

如果你使用Vue3和ElementUI的el-select组件的multiple属性进行单选或多选，然后想要实现点击编辑后回显的功能，可以通过以下步骤实现：

1. 给el-select绑定一个v-model，用来存储选择的值。

2. 在点击编辑按钮后，将v-model中的值赋给一个临时变量，用来记录编辑前的选择结果。

3. 将el-select的multiple属性设置为false，变为单选状态。

4. 将临时变量的值赋给el-select的v-model，将选择结果回显到el-select中。

5. 编辑完成后，将el-select的v-model的值赋给临时变量，并将multiple属性设置回原来的状态。

下面是一个简单的示例代码：

<template>
  <div>
    <el-select v-model="selected" multiple>
      <el-option label="Option 1" value="1"></el-option>
      <el-option label="Option 2" value="2"></el-option>
      <el-option label="Option 3" value="3"></el-option>
    </el-select>
    <el-button @click="edit">编辑</el-button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selected = ref([]) // 存储选择结果的数组
    const tempSelected = ref([]) // 临时存储编辑前的选择结果的数组

    const edit = () => {
      // 记录编辑前的选择结果
      tempSelected.value = [...selected.value]
      // 将multiple属性设置为单选
      const select = document.querySelector('.el-select__tags-text')
      if (select) {
        select.setAttribute('contenteditable', 'true')
        select.setAttribute('data-placeholder', '请选择')
      }
      // 将选择结果回显到el-select中
      selected.value = tempSelected.value[0]
    }

    const done = () => {
      // 将编辑后的结果赋给临时变量
      tempSelected.value[0] = selected.value
      // 将multiple属性设置回原来的状态
      const select = document.querySelector('.el-select__tags-text')
      if (select) {
        select.removeAttribute('contenteditable')
        select.removeAttribute('data-placeholder')
      }
    }

    return {
      selected,
      tempSelected,
      edit,
      done
    }
  }
}
</script>

在上面的代码中，我们使用了Vue3的Composition API对组件进行了重构。我们使用了ref来定义了存储选择结果的数组和临时变量的数组，并在edit和done方法中使用了箭头函数。在edit方法中，我们使用了document.querySelector来获取el-select的DOM元素，然后将其设置为contenteditable，使其变为可编辑的状态。同时，我们将multiple属性设置为false，变为单选状态，并将临时变量的值赋给el-select的v-model，实现了回显选择结果的功能。在done方法中，我们将编辑后的结果赋给临时变量，并将multiple属性设置回原来的状态。