el-select多选但后端要求返回字符串的解决方法，附+中间参数以唯一id作为key时出现问题的解决方式

需求：el-select多选但后端要求返回字符串

已知：el-select多选时绑定值为数组，如：arr:[‘这是第一个’,‘这是第一个’]
后端要求以字符串形式返回，使用“，”隔开，如：arr:“这是第一个,这是第一个”
方法：前端使用自定义中间参数进行转化
背景：此el-select存在多个，且被包含在列表的n列中，可能涉及新增、删除、换行等，所以不能直接根据index进行存储。

解决：

注：fileItem为当前列数据。
设fileItem.checkVal为后端接收的字符串名。

<el-col :span="8">
    <el-select 
         multiple
         v-model="checkList[fileItem.id]" 
         placeholder="请选择"
         @change="onChangeCheck(fileItem,$event)"
    >
        <el-option
            label="option1"
            value="option1"
       ></el-option>
       <el-option
            label="option2"
            value="option2"
       ></el-option>
   </el-select>
</el-col>

data(){
	return{
	  // 初始化中间参数
	  checkList:{} //多选绑定的数组（需求需要转换为字符串）- 以每个fileItem的id作为键
		}
	}
……
methods:{
	 // 改变时（get）
    onChangeCheck(fileItem,e){
    	//更新对象，键为fileItem的id
       this.checkList[fileItem.id] = e;
       fileItem.checkVal = e.join(",");
    },
    // 获取到数据时需要做初始化（set）
    // 注：初始化方法在获取数据时触发即可
    setSpecialCheck(fileItem){
      if(fileItem.checkVal ){
        this.$set(this.checkList, fileItem.id, fileItem.checkVal.split(','));
      }
    }
}

中间参数以唯一id作为key时出现问题

问题：有时候会出现部分数据的变更不会更新到视图等问题。
分析：发现出问题的数据不是响应式对象。

解决：在初始化时，将 this.checkList 转化为响应式

 this.$set(this.checkList, fileItem.id, fileItem.checkVal.split(','));