自定义Element Plus树形控件组件：实现全选功能与自定义样式

功能实现

1. 全选功能：

   • 在组件的setup函数中，我们定义了一个dataTree响应式数组，用于存储树形结构的数据。
   • 使用show-checkbox属性为树形控件添加复选框，允许用户进行多选。
   • default-expanded-keys属性用于设置默认展开的节点，这里我们设置了前两个节点。

2. 自定义样式：

   • 在<style>标签中，我们使用了SCSS来定义树形控件的样式。
   • 对于复选框，我们通过修改.el-checkbox__inner的样式来实现自定义图标。这里我们使用了background属性来设置图标的背景图片，并通过background-size和border-radius来调整样式。
   • .is-checked类用于当复选框被选中时的样式，同样通过背景图片来实现。
   • el-tree-node__expand-icon类用于隐藏树形控件的默认展开图标。
   • el-tree-node__content类用于设置节点的字体颜色。

代码解析

<template>

    <div class="home">

        <el-tree

            :data="dataTree"

            show-checkbox

            node-key="id"

            :default-expanded-keys="[0, 1]"

            :props="defaultProps">

            <template #default="{ node }">

                <span>{{ node.label }}</span>

            </template>

        </el-tree>

    </div>

</template>

<script lang="ts">

export interface AnyObject { [key: string]: any; }

import { ref, onMounted, reactive, toRefs, defineComponent } from "vue"; // vue相关方法

import "@/assets/scss/home/home.scss";

let state:AnyObject = reactive({

   

})

export default defineComponent({

    components: {

       

    },

    setup() {

        onMounted(() => {

           

        });

        // 树形控件

        const defaultProps = {

            children: 'children',

            label: 'label',

        }

        const dataTree = reactive([

            {

                id: 0,

                label: '全选',

                children: [

                    {

                        id: 0,

                        label: '铁路',

                        imageIndex: 0,

                        children: [

                            {

                                id: 0,

                                label: '铁路1',

                            },

                            {

                                id: 1,

                                label: '铁路2',

                            },

                            {

                                id: 2,

                                label: '铁路3',

                            }

                        ]

                    },

                    {

                        id: 1,

                        label: '公路',

                        imageIndex: 0,

                        children: [

                            {

                                id: 0,

                                label: '公路1',

                            },

                            {

                                id: 1,

                                label: '公路2',

                            },

                            {

                                id: 2,

                                label: '公路3',

                            }

                        ]

                    },

                    {

                        id: 1,

                        label: '水路',

                        imageIndex: 0,

                        children: [

                            {

                                id: 0,

                                label: '水路1',

                            },

                            {

                                id: 1,

                                label: '水路2',

                            },

                            {

                                id: 2,

                                label: '水路3',

                            }

                        ]

                    },

                ],

            }

        ]);

        return {

            ...toRefs(state),

            defaultProps,

            dataTree,

        };

    },

});

</script>

<style lang="scss" scope>

.home {

    .el-tree {

        /* 默认 */

        .el-checkbox__inner {

            width: 16px;

            height: 16px;

            background: url('../../assets/close.png') no-repeat top center;

            background-size: 100% 100%;

            background-size: contain;

            border: none;

            border-radius: none;

            &:before {

                display: none;

            }

        }

        /* checked 选中 */

        .is-checked .el-checkbox__inner {

            width: 16px;

            height: 16px;

            background: url('../../assets/open.png') no-repeat top center;

            background-size: 100% 100%;

            background-size: contain;

            border: none;

            border-radius: none;

            &:before {

                display: none;

            }

        }

        /* 隐藏倒三角 */

        .el-tree-node__expand-icon {

            display: none;

        }

        /* 节点的字体颜色 */

        .el-tree-node__content {

            color: #409eff;

        }

    }

   

}

</style>

结语

通过上述步骤，我们成功创建了一个具有全选功能和自定义样式的树形控件。这个组件可以轻松地集成到任何Vue.js项目中，为用户提供一个既美观又实用的界面元素。希望这篇文章能帮助您更好地理解如何在Vue.js中实现和定制树形控件。

注意事项

• 请确保您的项目中已经正确安装并引入了Element UI库。
• 自定义样式时，请注意路径和文件名的正确性，确保图片资源可以正确加载。
• 如果您需要进一步的样式定制或功能扩展，可以根据Element UI的文档进行相应的调整。

结束语

感谢您的阅读，希望这篇文章对您有所帮助。如果您有任何问题或建议，请在评论区留言，我们期待与您的交流。