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