Element-ui樹形控件el-tree鼠標移入顯示隱藏效果超簡單

 

顯示效果：

 

 

廢話不多說，直接上代碼

 

<template>
  <el-tree default-expand-all :data="data">
    <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
      <span>{{ node.label }}</span>
        <el-link v-show="data.show" size="mini" style="margin-left: 5px" type="primary" icon="el-icon-plus"></el-link>
        <el-link v-show="data.show" size="mini" style="margin-left: 5px" type="primary" icon="el-icon-delete"></el-link>   
      </span>
  </el-tree>
</template>

<script>

export default {
  data() {
    return {
      data: [
        {
          id: 0,
          label: '水果',
          show: false,
          children: [
            {
              id: 1,
              label: '蘋果',
              show: false
            },{
              id: 2,
              label: '芒果',
              show: false
            }
          ]
        }
      ],
    }
  },
  methods:{
    mouseenter(data) {
      this.$set(data, 'show', true)
    },

    mouseleave(data) {
      this.$set(data, 'show', false)
    }
  }
}
</script>