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) // 點擊操做事件
                }
              }
            })
          ])
        }
      }
    }
複製代碼

• 若有問題,歡迎指正

• 本人爲原創,如需轉載,請註明出處: render 渲染icon圖標更改方法