问题描述: Table组件操作,iview自带的icon并不能满足我的需要,根据render函数的属性,自己写了几种方式,后续会继续添加

1, 使用iview自带的icon图标

这个不方便改变他们的icon类型,使用受到局限

    let products: any = {
      columns: [{
        title: '操作',
        key: 'Action',
        width: 150,
        render: (h, params) => {
          return h('div', [
            h('Icon', {
              props: {
                type: 'trash-a' // iview自带的删除icon
              },
              style: {
                fontSize: '18px', // 改变icon的样式
                color: '#559DF9'
              },
              on: {
                click: () => {
                    console.log(111) // 点击操作事件
                }
              }
            })
          ])
        }
      }
    }

2, 在render函数里面添加innerhtml

新建span标签,在span里面添加i标签,生成自己想要的icon

    let products: any = {
      columns: [{
        title: '操作',
        key: 'Action',
        width: 150,
        render: (h, params) => {
          return h('div', [
              h('span', {
                style: {
                  fontSize: '18px',
                  color: '#559DF9'
                },
                domProps: { // 添加标签,使用自己引入的iconfont图标
                  innerHTML: "<i class='icon iconfont'>&#xe64f;</i>"
                },
                on: {
                  click: () => {
                    console.log(111) // 点击操作事件
                  }
                }
              })
          ])
        }
      }
    }

3, 改变render 类名来生成想要的图标

直接新建i标签,增加class名称,和innerhtml

我的iconfont引入方式是Unicode格式的,如果是 font class格式的会更简单,只需要改变class名称就可以了

    let products: any = {
      columns: [{
        title: '操作',
        key: 'Action',
        width: 150,
        render: (h, params) => {
          return h('div', [
              h('i', {
              class: 'icon iconfont',
               style: {
                fontSize: '18px',
                color: '#559DF9'
              },
              domProps: {
                innerHTML: '&#xe64f;' // iconfont图标
              },
              on: {
                click: () => {
                  console.log(111) // 点击操作事件
                }
              }
            })
          ])
        }
      }
    }

如有问题,欢迎指正
本人为原创,如需转载,请注明出处: render 渲染icon图标更改方法