如图所示:先点击龙须面,再点击虾仔煎的时候,会在下拉框中按照用户的点击顺序显示出来。
问题:前端如何按照黄金糕-双皮奶-虾仔煎-龙须面的顺序显示点击的值呢?这样做的一个好处就是按后端的顺序返回给他,在后端处理节约一定的性能。同样,以该顺序显示在前端界面,增加用户的一个体验感!
回到自己的项目中,我希望实现一个这样的效果。如何现实?
起先小编也想了很多方法,数据结构的冒泡排序都用上了,后来想到了一个非常简便的方式,只需要进行一个sort简单排序即可。
// 获取options数组
const options = this.tooltipBaseData.options;
// 根据options数组的下标顺序重新排序value数组中的值
const sortedValues = value.sort((a, b) => {
return options.indexOf(a) - options.indexOf(b);
});
// 更新value数组为重新排序后的值
this.value = sortedValues;
console.log("valie", this.value);
this.tooltipBaseData.options为父组件传递给子组件的值,具体则是下拉框框的选项。
将拿到value对下拉组件进行一个v-model绑定即可。