需求:在table中实现收藏,效果如下
由于是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);
})
},