树

基础树/自定义图标

可选

严格模式

显示连线

第一段

第一段

<template>
    <div class="demo-treeSelect-column">
        <t-form>
            <t-form-item label="可选" style="margin-bottom: 16px">
                <t-switch v-model="checkable" />
            </t-form-item>
            <t-form-item label="严格模式" style="margin-bottom: 16px">
                <t-switch v-model="checkStrictly" />
            </t-form-item>
            <t-form-item label="显示连线" style="margin-bottom: 16px">
                <t-switch v-model="showLine"/>
            </t-form-item>
        </t-form>
        <div class="demo-treeSelect-row" style="width: 300px;">
            <t-tree
            :data="items"
            :icon="icon"
            hover
            :checkable="checkable"
            :check-strictly="checkStrictly"
            :line="showLine"
            @change="onChange"
            @click="onClick"
            />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            checkable: true,
            checkStrictly: false,
            showLine: true,
            items: [{
                label: '第一段',
                children: [{
                label: '第二段',
                children: [{
                    label: '第三段',
                }],
                }, {
                label: '第二段',
                }],
            }, {
                label: '第一段',
                children: [{
                label: '第二段',
                }, {
                label: '第二段',
                }],
            }],
        };
    },
    methods: {
        onClick(context) {
            console.info('onClick:', context);
        },
        onChange(checked, context) {
            console.info('onChange:', checked, context);
        },
        icon(createElement, node) {
            let name = '';

            if (node.getChildren()) {
                if (node.expanded) {
                    name = 'care-icon-arrow-down-small';
                } 
                else {
                    name = 'care-icon-arrow-right-small';
                }
                return  <i slot="icon" class={name}></i>;
            }else {
                return  '';
            }
        },
    }
};
</script>

显示代码 复制代码 复制代码

带操作的树

第一段

第二段

第三段

第二段

第一段

第二段

第二段

第一段

第二段

第一段

<template>
    <div class="demo-treeSelect-column">
        <div class="demo-treeSelect-row" style="width: 300px;">
            <t-tree
            :data="items"
            :icon="icon"
            hover
            expandAll
            >
            <template #operations="{ node }">
                <i v-if="!node.getChildren() && !node.expande" class="care-icon-more"></i>
                <i class="care-icon-more"></i>
            </template>
            </t-tree>
        </div>
        <t-divider />
        <div class="demo-treeSelect-row" style="width: 300px;">
            <t-tree
            :data="items"
            :icon="icon"
            hover
            expandAll
            >
            <template #label="{node}">
                <input v-if="!node.getChildren() && !node.expande" value="史蒂夫"/>
                <span v-else>{{node.label}}</span>
            </template>
            <template #operations="{ node }">
                <i v-if="!node.getChildren() && !node.expande" class="care-icon-edit"></i>
                <i class="care-icon-more"></i>
            </template>
            </t-tree>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            checkable: true,
            checkStrictly: false,
            items: [{
                label: '第一段',
                children: [{
                label: '第二段',
                children: [{
                    label: '第三段',
                }],
                }, {
                label: '第二段',
                }],
            }, {
                label: '第一段',
                children: [{
                label: '第二段',
                }, {
                label: '第二段',
                }],
            }],
        };
    },
    methods: {
        onClick(context) {
            console.info('onClick:', context);
        },
        onChange(checked, context) {
            console.info('onChange:', checked, context);
        },
        icon(createElement, node) {
            let name = '';

            if (node.getChildren()) {
                if (node.expanded) {
                    name = 'care-icon-arrow-down-small';
                } 
                else {
                    name = 'care-icon-arrow-right-small';
                }
                return  <i slot="icon" class={name}></i>;
            }else {
                return  '';
            }
        }
    }
};
</script>

显示代码 复制代码 复制代码