【vue-iview】iview Table组件渲染操作按钮, render 渲染icon图标更改方法

90 阅读 0 评论 60 点赞

我是靠谱客的博主高大毛衣，最近开发中收集的这篇文章主要介绍【vue-iview】iview Table组件渲染操作按钮, render 渲染icon图标更改方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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) // 点击操作事件
                }
              }
            })
          ])
        }
      }
    }

作者：囧囧图图
链接：https://juejin.im/post/5b4811d8e51d45190a42fc79
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。