如何仅在鼠标悬停在树节点的右端显示小图标

Question

我试图在同一树节点的鼠标悬停时在树节点上显示一个图标。

Vue.component('tab', {

props:[],
data() {
    return{
        data: [{
          label: 'Level one 1',
          children: [{
            label: 'Level two 1-1'
          }]
        }, {
          label: 'Level one 2',
          children: [{
            label: 'Level two 2-1'
          }, {
            label: 'Level two 2-2'
          }]
        }, {
          label: 'Level one 3',
          children: [{
            label: 'Level two 3-1'
          }, {
            label: 'Level two 3-2'
          }]
        }],
    defaultProps: {
      children: 'children',
      label: 'label'
   }
 }
},  
methods: {
},
template: `<el-tree :data=data :props="defaultProps"></el-tree>`
})

var vm=new Vue({
  el: '#app',
})

应该看到一个小图标，如下图所示。   

这是小提琴：https://jsfiddle.net/8hdm2ykb/

Answer 1

将以下内容添加到您的CSS

.el-tree-node__content:hover {
    background-image: url(https://i.imgur.com/RZfgbVH.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px 100%;  
 }

https://jsfiddle.net/8hdm2ykb/12/

将背景图像替换为您要显示的图像，然后将背景尺寸设置为您自己的要求。