iview 的table 加矢量图icon

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);

效果：

image.png

————————————————
原文链接：https://blog.csdn.net/fanyanjiang/article/details/103952970