飞道的博客

iview Table列表中增加字体图标

388人阅读  评论(0)

iview Table列表中增加字体图标

一:

{
          'title': this.$t('设备别名'),
          'key': 'actStatus',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'ios-create-outline'
                },
                style: {
                  color: '#4071FF'
                },
                on: {
                  click: () => {
                    console.log('23')
                  }
                }
              }),
              h('span', params.row.actStatus)
            ])
          }
        },

二: 通过伪元素

 {
          'title': this.$t('设备别名'),
          'key': 'actStatus',
          render: (h, params) => {
            return h('span', {
              class: 'otherName',
              on: {
                click: () => {
                  console.log('点击')
                }
              }
            }, params.row.actStatus)
          }
        },
  .otherName {
    position: relative;
  }
   /deep/.otherName::after {
          content: '\F1A2';
          font-family: Ionicons;
          font-size: 16px;
          width: 0;
          height: 0;
          position: absolute;
          color: #2D8CF0;
  }


转载:https://blog.csdn.net/weixin_46034375/article/details/113938620
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场