iview Table元件渲染操作按鈕, render 渲染icon圖示更改方法

囧囧圖圖發表於2018-07-13
View元件

問題描述: 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) // 點選操作事件
                }
              }
            })
          ])
        }
      }
    }
複製程式碼

相關文章