记一次多选、单选功能

后端挖坑前端跳，人家是技术部老大，我这种小人物只能服从的命啊~~~

事情是这样的，业务需要做一个选择功能，但是这个选择可大有内涵

$需求：$

• 先给到所有的数据供用户选择（可多选）
• 默认：将多选的数据选中放到默认中提供单选

具体操作如下图。本来呢，需求不是很难，关键是后端给的数据太变态了

再看看数据是怎样的吧，food_select控制多选，food_default控制单选

json格式，本来直接循环到代码中也没问题，关键这一条数据要多选跟单选一起用，所以就只能转换了（自我见解）

this.mealList = res.data.data

for (let val in this.mealList) {//将json转数组

    let obj = { food_name:"",food_id:"",food_select:"",food_default:""}

    obj.food_name = this.mealList[val].food_name

    obj.food_id = this.mealList[val].food_id

    obj.food_select = this.mealList[val].food_select

    obj.food_default = this.mealList[val].food_default

    this.arrMealList.push(obj)

}

let filterList=this.arrMealList.filter(item => (item.food_select == true))//过滤出多选选中的数据

this.mealCheckList = filterList.map(item => item.food_id)

if(this.mealCheckList.length >0){//将多选选中的数据添加至单选要循环的数组中

    this.newMealList=this.arrMealList.filter(item => this.mealCheckList.includes(item.food_id))

    this.meal_food_default = this.arrMealList.findIndex((item) => item.food_default)

    this.defaultMealId = this.arrMealList[this.meal_food_default].food_id//默认单选选中的id

能这样将数据添加，只能说看前端太闲了，给多找事做吧

结语：各位进来的大佬们，不知是否有其他看法实现其功能呢？小菜鸡在此拜谢啦^_^