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

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

[TOC]

#### select加载的代码如下
多选加一个`multiple`属性即可。

```
<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>
```

label绑定两个值的拼接，字符串拼接看这个：
https://www.tnblog.net/notebook/article/details/8140


#### 传递到后台的时候可以用逗号来分割字符串，方便数据库存储
```
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
```

##### 上面的写法是最后必须有一个逗号的情况，如果最后面可能有逗号也可能没有，使用下面的方法

方法一：
```
const choiseUsers = row.responsiblePersonIds
  .split(/,+/)  // 按连续逗号分割
  .filter(Boolean); // 过滤空值
```

方法二：
```
let str = row.responsiblePersonIds;
// 移除首尾空格（如果有需要）
str = str.trim();
// 移除末尾逗号（如果存在）
if (str.endsWith(',')) {
  str = str.slice(0, -1);
}
// 分割并过滤空值
const choiseUsers = str.split(',').filter(item => item !== '');
```

##### 已经处理过一次了就不需要在进行处理了

就是判断一下是字符串还是数组，如果是数组就不需要在处理了，如果是字符串就处理一次

```
// 如果已经是数组类型而不是字符串类型就可以不用处理了，不然处理过一次在处理的话就会报错
if (row.userType != null && Array.isArray(row.userType)) {
	console.log("已经处理过一次不需要在进行处理了！")
} else {
	const choiseUserTypes = row.userType
		.split(/,+/) // 按连续逗号分割
		.filter(Boolean); // 过滤空值
	// console.log("看看处理后的用户类型",choiseUserTypes)
	row.userType = choiseUserTypes;
}
```

TeachingNote

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

{{item.title}}