v-model直接把数据初始化成空字符串‘‘,el-select没有回显初始数据，有关element-plus的el-select组件和TreeSelect组件

我直接说原因吧，就是当 element 选择组件在没有开启可以多选时，传递的是一个数组时，就会把传递的数据初始化成一个空字符传''

看代码 select：

<script setup lang="ts">
import { ref, watch } from 'vue'

// 错误写法
const value1 = ref(['Option1'])
// 正确写法
// const value1 = ref('Option1')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
watch(value1, (val) => {
  console.log(val, 'val') // 此时会输出 空字符串'' 和 字符串'val'
})
</script>
<template>
  <el-select v-model="value1" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<style lang="less" scoped></style>

看代码 TreeSelect：

<script setup lang="ts">
import { ref, watch } from 'vue'

const value = ref(['1-1-1'])

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
watch(value, (val) => {
  console.log(val, 'val') // 此时会输出 空字符串'' 和 字符串'val'
})
</script>
<template>
  <el-tree-select
    v-model="value"
    :data="data"
    :render-after-expand="false"
    style="width: 240px"
  />
</template>

<style lang="less" scoped></style>

所以当没有开启多选 multiple 时，我们需要传递是字符串，当开启 multiple 时，我们才传递数组