父元素加hover后面跟子元素类名控制子元素样式

<template>
  <div>
    <a-tree
      :tree-data="treeData"
      :replaceFields="{children:'children', title:'name', key:'data_id',slots:'slots' }"
      @select="handleSelect"
      selectable
    >
       <!-- 自定义折叠图标 -->
      <!-- <template slot="switcherIcon">
        <i class="icon-parent"></i>
      </template> -->
      <template slot="smile" slot-scope="item">
          <span class="m-content-title">
            {{item.name}}
            <a-dropdown>
            <a-icon type="more" class="m-content-icon"  @click="e => e.preventDefault()"/>
            <a-menu slot="overlay">
            <a-menu-item
              class="m-operate_icon_create_parent_son"
              v-for="(item,index) in list.operateList"
              :key="index"
              @click="handleOperate(index)"
            >{{item.label}}</a-menu-item>
            </a-menu>
          </a-dropdown>
          </span>
      </template>
    </a-tree>
  </div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import {dataOperste as list} from '@/config/config-data'
export default {
  data () {
    return {
      list,
      treeData: [], // 目录树列表
      nodeName: '', // 节点名称
      nodeId: '' // 节点id
    }
  },
  mounted () {
    this.getTree()
  },
  methods: {
    ...mapMutations({
      mutTreeId: 'DashBoard/mutTreeId',
      mutTreeName: 'DashBoard/mutTreeName',
      mutYbpId: 'DashBoard/mutYbpId'
    }),
    // 选中的节点展开对应的内容
    handleSelect (key, event) {
      // 注意 antd vue中tree组件a-directory-tree和a-tree事件返回值不同
      this.nodeName = event.node.dataRef.name
      this.nodeId = event.node.dataRef.data_id
      console.log(this.nodeName, this.nodeId)
      let node = event.node.dataRef
      if (node.type === 1) {
        this.mutTreeId(this.nodeId)
      } else if (node.type === 2) {
        this.mutTreeName(this.nodeName)
        this.mutYbpId(this.nodeId)
      }
      this.getTree(node)
    },
    // 获取目录树
    getTree (node) {
      let resData = null
      let id = node ? node.data_id : '0'
      this.$API.getTreeData(id).then(res => {
        resData = res.data.data
        if (!node) {
          let data = resData
          for (let i = 0; i < data.length; i++) {
            data[i].scopedSlots = { title: 'smile' }
            resData = data
          }
          console.log(resData)
          this.treeData = resData
        } else if (node.type === 1) {
          this.organizeData(this.treeData, node, resData)
        } else {
          this.organizeData(this.treeData, node, resData)
        }
      })
    },
    // 组织数据
    organizeData (treeData, node, resData) {
      for (let i = 0; i < treeData.length; i++) {
        if (treeData[i].data_id === node.data_id) {
          treeData[i].children = resData
          // console.log(this.treeData)
          this.$forceUpdate()
          return false
        } else {
          if (treeData[i].children) {
            this.organizeData(treeData[i].children, node, resData)
          } else {
            continue
          }
        }
      }
    },
    // 目录树更多操作
    handleOperate () {

    }
  }
}
</script>
<style lang="less" scoped>
.ant-tree /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
  // width: 200px;
}
// title与图标样式
  .m-content-title{
    display: inline-block;
    width: 200px;
    // 父元素加hover后面跟子元素类名控制子元素样式
    &:hover .m-content-icon{
        color: #000000;
      }
      // background: red;
    .m-content-icon{
      font-size: 14px;
      .mixin_percentage(margin-left,200,50);
      color: #e8eaee;
    }
  }
</style>