本文章默认全程使用Vue2和Element，如果有使用Vue3或者Element Plus的地方会有提示！
基本使用
使用multiple 属性开启选择框的多选功能，此时v-model的值为当前选中值（:value绑定的值）所组成的数组（可以仍然将其设置为字符串，但当后续获取其中的值时会自动转换成数组）。
<template>
<el-select v-model="value" multiple placeholder="请选择"> <!-- value是双向绑定的值 -->
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"><!-- options是下拉列表选项；label为下拉列表在页面上显示的内容；value为页面显示标签实际上对应的值； -->
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [ // 下拉列表
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
}
],
value: [] // value值可以为字符串（""），但是绑定值改变后获取的仍然是数组
}
}
}
</script>
数据回显
场景：使用多选的选择器，获取到默认的数据后，让多个回显标签显示在多选的选择器中。
思路：其实这个不难，只要把数据赋值给v-model绑定的值就可以了，但是一定要注意其中el-option的value的对应，要想获取到value后直接回显示对应的label，就必须与对应value的值完全相等（注意是完全相等，相同数字的字符串和数字类型都不行，必须是同一类型）！！！
对于多个数据来说（给
el-select开启multiple），返回的是这个value的数组，所以对于回显需要回填的数据也是这个value值的数组。
<template>
<el-select v-model="value" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
}
],
value: ['选项1', '选项2'] // 根据其中的value值进行回显，回显的数据为对应value值对象的label值
}
}
}
</script>
回显修改
场景：正常的回显数组是以value组成的字符串数组，我们可以通过这个字符串value值来找到 options 下对应的对象，但是我们需要手动筛选一遍，过于麻烦。
思路：既然回显的数组是根据el-option下绑定的value值来确定的，那么在设置value值时直接设置整个对象，这样在回显时可以采用对象数组的形式，更方便我们做一些其他的操作。
<template>
<el-select v-model="value" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item"> <!-- 直接将value的值设置为options中的每个对象 -->
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '虾饺'
}
],
value: [
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '虾饺'
}
] // 回显的value数组也必须是跟options中的每个对象相对应
}
}
}
</script>
数据显示问题
场景：回显的数据是异步从别的地方加载过来的，可以得知代码已经获取到了数据（例如在获取数据之后打印确实有数据的值），但是在页面上并没有正确的渲染出来；或者选择了下拉框里某个值，并没有在页面中正确渲染出已选择的这个值，但是在实际发送的表单项里又有这个值。
分析：可能是因为数据层次结构太多，render函数没有自动更新（Vue不能检测到对象属性的添加或删除）。
解决：手动触发更新。
<el-select v-model="value" placeholder="请选择" @change="change()">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
change() {
this.$forceUpdate();
}
注意：使用这个可能会触发表单校验问题，就是表单项里有值但是表单校验仍然说该值为空。（详细见
el-form一章）。
回显数据限制——禁止删除并禁止选择
注意：阅读这章前建议先阅读回显修改一章。
场景：点击表格项的编辑按钮出现弹窗或抽屉，其中有该项的具体信息包括需要回显的多选器，回显的数据由于权限的原因需要进行限制，如果该用户没有操作该数据的权限，则对于该用户来说回显数据上的删除按钮不会出现（不能删除该数据），下拉能显示该数据但是无法对其进行点选（禁用状态）。
注：该场景下我们已经得到了该用户没有权限的数据值的列表。
思路：由于el-select的多选回显数据后默认的回显tag上会有一个删除的小叉来提供删除功能，在这里我选择把这个小叉通过css干掉来禁止删除（需要直接操作dom）；而禁止下拉选择则是可以直接通过disabled属性过滤掉。
注意：禁用删除功能还可以通过官方
remove-tag事件进行处理，该事件多选模式下移除tag时触发，接收一个移除的tag值的回调，我们可以在移除这个tag（数据）时再将数据填回去从而达到没有删除的效果，但是这样删除的小叉还会存在，容易对用户引起误会，所以我才用了直接干掉它的做法。
<template>
<el-select v-model="value" multiple ref="selectRef" placeholder="请选择">
<el-option
v-for="item in rolesList"
:key="item.value"
:label="item.label"
:value="item"
:disabled="!item.isAuth"
> <!-- 通过每项对象里是否有isAuth来判断该选项是否禁用 -->
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
// this.value（回显的数据）和rolesList（下拉菜单需要显示的数据）都已经通过axios或其他方法请求后端接口拿取到了数据，此处不再详细描述来源，获取的数据的数据结构如下，为了方便操作，两个数据结构大致相同
rolesList: [
// {
// value: '选项2',
// label: '双皮奶',
// isAuth: false
// }
],
value: [
// {
// value: '选项2',
// label: '双皮奶',
// isAuth: false
// }
]
}
},
methods: {
getRolesList() {
let noRoleList = [...]; // 内为没有权限的数据列表（可以是数组对象，也可以是数组字符串等，根据自己的具体需求进行修改；此处为数组对象） @1
// 抓取小叉的dom元素（span里包裹的i）
const childrenSpanList = this.$refs.selectRef.$children[0];
let spanList = childrenSpanList.$el.children;
setTimeout(() => { // @2
for(let iconEl of spanList) { // 遍历所有的span @3
noRoleList.forEach(item => {
if (item.name == iconEl.firstElementChild.innerHTML) { // 当前的标签里的名字在无权限的数据列表里
iconEl.lastElementChild.style.display = 'none'; // 将删除按钮干掉
}
})
}
})
}
},
}
</script>
@1：此处也可以不需要额外的没有权限的数据列表，可以直接通过回显数据里的
isAuth字段来判断是否有权限，然后取出其中的 label 再进行后续操作；万变不离其宗，最终都是为了找出没有权限的数据项然后通过dom操作移除删除图标。@2：此处的
setTimeout()是为了能让 spanList 真正被获取到并对其进行操作（由于Vue的渲染顺序，即使能够打印出 spanList 的数据，在进行循环时也可能为空）；Vue 中也有$nextTick()可以用来更新数据，但是这个对于初始打开时的回显并没有效果，故采用了setTimeout()。@3：在
el-select的多选器框的dom结构里，每一个多选的 tag 都是包裹在一个 span 标签里，这个 span 标签里有两个元素，一个是用于显示 label（ span 标签），一个是用于显示删除小叉的图标（ i 标签）；所以可以采用firstElementChild和lastElementChild来操作对应的dom元素。（详情dom情况自行查看）
