iview实现收藏功能

需求：在table中实现收藏，效果如下

1531270885(1).png

由于是table标签，需要使用render函数，本来是用了Icon组件，但是无法做到同步刷新，需要reload才可以重新显示列表。显然频繁刷新不太好。
所以又尝试了iview自带的评分组件Rate，实现了：点一下星星，星星变亮，并把题目加入收藏。再点一下星星，星星变暗，题目移出收藏列表。

《table部分》
{
title: "收藏题目",
key: "index",
render: (h, params) => {
let value;
if(this.favorite.includes(params.row.displayId)){
value=1;
}else{
value=0;
}
return h("Rate", {
props: {
count: 1,
clearable: true, //可以取消点亮的星星
value:value,
},
on: {
'on-change': () => { //rate自带方法，监听value的变化
this.like(params.row.displayId); //value变化会传递这一行的题目ID给收藏函数
}
}
});
}

《methods部分》
// 收藏题目
like(id) {
if (this.favorite.includes(id)) { //如果这道题目在收藏列表中
axios.get(config.service.users + "/cancel", { //传递给后台，在收藏列表中删除这道题目
params: { displayID: id },
headers: config.headers()
}).catch(e=>{
console.log("加入收藏"+e);
});
} else //如果不在收藏列表中
axios.get(config.service.users + "/favorite", { //传递给后台，在收藏列表中加入这道题目
params: { displayID: id },
headers: config.headers()
}).catch(e=>{
console.log("取消收藏"+e);
})
},