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 公共样式里面引用图片方式：

@ ~使用区别

 修改内容：

修改内容效果：