【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: “”
},
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) // 点击操作事件
}
}
})
])
}
}
}

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