2021-09-10 iview tabel添加个icon图标

 {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        tooltip: true,
                        align: 'center',
                        width: 130,
                        render: (h, params) => {
                          return h(
                            'div',
                            [
                              h('A', {
                               style:{
                                 marginRight:'10px',
                               },
                                props: {
                                  color: '#2d8cf0',
                                  size:"small"
                                },
                                on: {
                                  click: () => {
                                    this.getListFn(params.row,'topic',this) //刷新
                                  }
                                }
                              }, '刷新'),
                              h('span', {
                                style:{
                                  marginRight:'10px',
                                  color: '#1890ff',
                                },
                                domProps: { // 添加标签,使用自己引入的iconfont图标
                                  innerHTML: "<i class='iconfont iconbianji1'></i>"
                                },
                                on: {
                                  click: () => {
                                    this.editTopicInfo(params.row) //编辑
                                  }
                                }
                              }),
                              h('span', {
                                style:{
                                  marginRight:'10px',
                                  color: '#1890ff',
                                },
                                domProps: { // 添加标签,使用自己引入的iconfont图标
                                  innerHTML: "<i class='iconfont iconshanchu1'></i>"
                                },
                                on: {
                                  click: () => {
                                    this.deleteTopicInfo(params.row) //删除
                                  }
                                }
                              }, '删除')
                            ]
                          )
                        }
                      },

iview Table组件渲染操作按钮, render 渲染icon图标更改方法
问题描述: 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: '' // iconfont图标
          },
          on: {
            click: () => {
              console.log(111) // 点击操作事件
            }
          }
        })
      ])
    }
  }
}