tree-001-treeview.html 2.1 KB
<div class="design-tree-container">
    <context-menu-container>
        <el-tree
        v-if="inited"
        ref="treeexpbar_tree"
        class="design-tree"
        node-key="id"
        lazy
        :show-checkbox="!isSingleSelect"
        :check-on-click-node="!isSingleSelect"
        :default-expanded-keys="expandedKeys"
        :props="{
            label: 'text',
            isLeaf: 'leaf',
            children: 'children'
        }"
        :load="load.bind(_self)"
        :highlight-current="true"
        :expand-on-click-node="false"
        @check="onCheck.apply(_self, arguments)"
        @current-change="selectionChange.apply(_self, arguments)"
        :filter-node-method="filterNode"
        >
            <template slot-scope="{ node, data }">
                <context-menu :contextMenuStyle="{width: '100%'}" :data="node" :renderContent="renderContextMenu.bind(_self)">
                <tooltip transfer style="width: 100%;" max-width="2000" placement="right">
                    <div class="tree-node" @dblclick="doDefaultAction(node)">
                        <span class="icon">
                            <i v-if=" data.iconcls && !Object.is(data.iconcls, '')" :class="data.iconcls"></i>
                            <img v-else-if="data.icon && !Object.is(data.icon, '')" :src="data.icon" />
                            <icon v-else-if="isOutputIconDefault" type="ios-paper-outline"></icon>&nbsp;
                        </span>
                        <span class="text">
                            <span v-if="data.html" v-html="data.html"></span>
                            <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
                        </span>
                    </div>
                    <template slot="content">
                        <span v-if="data.html" v-html="data.html"></span>
                        <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
                    </template>
                </tooltip>
                </context-menu>
            </template>
        </el-tree>
    </context-menu-container>
</div>