iview Table列表中增加字体图标

向右看齐 2022-11-22 10:28 251阅读 0赞

**效果图**  
![在这里插入图片描述][20201104110236959.png_pic_center]  
**vue.js**

{
        
              title: '员工姓名',
              key: 'Name',
              width: 150,
              align: 'center',
              render: (h, params) => {
        
                return h('div', [
                  h('span', params.row.Name),
                  h('Icon', {
        
                    props: {
        
                      type: 'iconfont ivu-icon-aaa-tianxie',
                      size: '18'
                    },
                    style: {
        
                      color: '#ffb340',
                      cursor: 'pointer',
                      marginLeft: '10px'
                    },
                    on: {
        
                      click: () => {
        
                      console.log(params.row.Name)
                      }
                    }
                  })
                ]);
              }
            }

// h('i', {
        
                  //   class: {
        
                  //     'ivu-icon': true,
                  //     'ivu-icon-aaa-tianxie': true,
                  //     'icon-btn': true
                  //   },
                  //   style: {
        
                  //     color: '#ffb340',
                  //     marginLeft: '10px',
                  //     fontSize: '18px'
                  //   },
                  //   on: {
        
                  //     click: () => {
        
                  //     console.log(params.row.Name)
                  //     }
                  //   }
                  // })

Tip: `如果点击事件没有作用 把 on 改成==>nativeOn`

[20201104110236959.png_pic_center]: /images/20221120/dc11724ecead44888fbaf379c65364ef.png