el-tree中的展开和折叠切换icon和自定义icon的问题

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

            <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的重点。