iview+table+icon实现table中某一列添加图标。自己项目里遇到的问题,记录一下。
注意:table里的render函数的使用。
第一步:render函数
{
title: '站名',
key: 'name',
// align:"center",
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: params.row.isClick?'md-star':'md-star-outline'
},
style:{
color:'#ffb340',
cursor: 'pointer',
marginRight: '5px',
fontSize:'18px'
},
on: {
click: () => {
this.stars(params.index, params)
}
}
}),
h('span', params.row.name)
]);
}
},
第二步:后端给的字段 (是否改变为另一个状态)
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
isClick: false
},
第三步:点击改变状态(点击事件)
stars(index, params){
// console.log(index, params)
params.row.isClick = !params.row.isClick;
this.$eventBus.$emit("starsIndex",index);
}
效果: