iview 的table 加向量圖icon
阿新 • • 發佈:2018-12-20
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); }
效果: