今天要做一个视频监控的需求，有播放资源的时候可以展开和折叠，但是要求用自定义的图片。

            <el-tree ref="tree" :data="treeData" :props="defaultProps" node-key="indexCode" :default-checked-keys="[5]"                 default-expand-all @node-click="handleNodeClick" :expand-on-click-node="true"                 @node-contextmenu="rightClick">                 <span slot-scope="{node , data}" @click="handleExpand">                     <span :name="node.label">                         <i v-if="data.children.length>0"                             :class="node.expanded ? 'el-icon-circle-plus-outline':'el-icon-remove-outline'"></i>                         <i v-else class="el-icon-office-building"></i>                         {{node.label}}                     </span>                 </span>             </el-tree>             <div class="viedo-list">                 <div class="menu-list">                     <h3>视频列表</h3>                     <p v-if="selName" class="menu-name">                         <i class="el-icon-folder-opened"></i>                         <span class="sel-name">{{selName}}</span>                     </p>                 </div>                 <el-tree class="tree-menu" :data="newTree" :props="defaultProps" @node-click="playVideo">                     <span slot-scope="{node}">                         <span :name="node.label">                             <i class="el-icon-video-play"></i>                             {{node.label}}                         </span>                     </span>                 </el-tree>             </div> 这个是分成两个接口，树为一个接口，播放资源为一个接口，有播放资源的在新树里面可播放。 注： :class="node.expanded ? 'el-icon-circle-plus-outline':'el-icon-remove-outline'" 作为自定义折叠和展开自定义icon的重点。