vue element ui 中 select 设置支持多选，如何给select组件设置默认选中的值

电脑版发表于：2024/9/14 10:16

[TOC]

#### select加载的代码如下

```
<template>  
  <el-select size="small" clearable="" multiple  v-model="choiseLevels" placeholder="请选择消息等级">
  <el-option
    v-for="item in msgLevelTagArray"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      msgLevelTagArray: [
        {value:1,label:'严重异常'},
        {value:2,label:'异常'},
        {value:3,label:'警告'},
        {value:4,label:'预警'},
        {value:5,label:'提醒'},
        {value:6,label:'普通'},
        {value:7,label:'日常'}
      ],
      choiseLevels:"",
    };  
  },  
};  
</script>
```

#### 传递到后台的时候可以用逗号来分割字符串，方便数据库存储
```
let choiseUserIds = ""
for (let index = 0; index < state.editFromData.responsiblePersonIds.length; index++) {
	const userId = state.editFromData.responsiblePersonIds[index];
	choiseUserIds= choiseUserIds+userId+","
}
```



#### 要想默认选中非常简单，直接给绑定的属性设置一下需要选中的值即可
```
  mounted() {
    // 设置默认选中
    this.choiseLevels = [1, 2]
  },
```
或者直接在属性上面给值也是可以的：
```
<script>  
export default {  
  data() {  
    return {  
	  // 这里直接给值也可以默认选中
      choiseLevels:[2,3],
    };  
  },  
};  
</script>
```

#### 从后台读取出来的是一个字符串里边包含了逗号，我们在前端根据逗号拆分字符串，并且去掉最后一个逗号即可
```
// 处理多选的选中
const choiseUsers = row.responsiblePersonIds.split(',').slice(0, -1);
state.editFromData.responsiblePersonIds = choiseUsers
```

TeachingNote

vue element ui 中 select 设置支持多选，如何给select组件设置默认选中的值

{{item.title}}