iview 表格列自定义样式 & public.css 公共样式里面引用图片方式
{
title: '操作',
key: 'action',
align: 'center',
renderHead: () => {}, // 自定义表头样式
className: 'col_oper',
width: 120,
render: (h, params) => { // 自定义列
return h('div',
{
class: 'oper',
style: {
cursor: 'pointer',
color: '#333333',
fontSize: '14px',
lineHeight: '20px',
fontWeight: 400
},
on: {
click: () => {
this.issueDel(params.row)
}
}
},
[
h('div', {
class: 'trash',
style: {
display: 'inline-block'
}
}),
h('span',
{
class: 'del',
style: {
display: 'inline-block'
}
}, '删除')
])
}
}
css:
/deep/.oper {
.trash {
width: 14px;
height: 14px;
background: url('../../assets/images/notice/trash_default.png');
background-size: 100% 100%;
// vertical-align: middle;
vertical-align: baseline;
margin-right: 3px;
}
&:hover {
.trash {
width: 14px;
height: 14px;
background: url('../../assets/images/notice/trash_active.png');
background-size: 100% 100%;
}
span {
color: #FF783D;
}
}
}
效果:

hover样式:

、、、、、
public.css 公共样式里面引用图片方式:


修改内容:

修改内容效果:



浙公网安备 33010602011771号