vue element select+ztree（滚动条优化），周选择器获取开始时间和结束时间，input+ztree

 练手用过的，防止忘记

<template>
    <div>
        <el-select v-model="value" placeholder="请选择">
            <el-option v-model="value" class="overflow" style="height:200px;overflow-y: auto;">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-option>
        </el-select>

        <el-date-picker
            v-model="getDate"
            type="week"
            format="yyyy 第 WW 周"
            value-format="yyyy-MM-dd"
            placeholder="选择周"
        ></el-date-picker>
        {{getDate}}
        <hr />
        <el-button type="primary" @click="getDates">获取时间</el-button>

        <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                <el-input v-model="state1" placeholder="请输入"></el-input>
            </span>
            <el-dropdown-menu class="sr" slot="dropdown">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: "",
            state1: "",
            getDate: "",
            data: [
                {
                    label: "一级 1",
                    children: [
                        {
                            label: "二级 1-1",
                            children: [
                                {
                                    label: "三级 1-1-1"
                                }
                            ]
                        }
                    ]
                },
                {
                    label: "一级 2",
                    children: [
                        {
                            label: "二级 2-1",
                            children: [
                                {
                                    label: "三级 2-1-1"
                                }
                            ]
                        },
                        {
                            label: "二级 2-2",
                            children: [
                                {
                                    label: "三级 2-2-1"
                                }
                            ]
                        }
                    ]
                },
                {
                    label: "一级 3",
                    children: [
                        {
                            label: "二级 3-1",
                            children: [
                                {
                                    label: "三级 3-1-1"
                                }
                            ]
                        },
                        {
                            label: "二级 3-2",
                            children: [
                                {
                                    label: "三级 3-2-1"
                                }
                            ]
                        }
                    ]
                }
            ],
            defaultProps: {
                children: "children",
                label: "label"
            }
        };
    },
    methods: {
        handleSelect() {},
        querySearch() {
            // return [];
        },
        handleNodeClick(data) {
            console.log(data);
        },
        getDates() {
            var start = this.getDate;
            var date1 = new Date(start);

            var upDate = date1.getTime() - 24 * 60 * 60 * 1000; // 减一天
            var setUpDate = this.formatDate(upDate);
            console.log(setUpDate);

            var downDate = date1.getTime() + 3600 * 1000 * 24 * 6; // 加六天
            var setDownDate = this.formatDate(downDate);
            console.log(setDownDate);
        },
        formatDate(date) {
            // 时间戳转换成年月日
            var date = new Date(date);
            var YY = date.getFullYear() + "-";
            var MM =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            var DD =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hh =
                (date.getHours() < 10
                    ? "0" + date.getHours()
                    : date.getHours()) + ":";
            var mm =
                (date.getMinutes() < 10
                    ? "0" + date.getMinutes()
                    : date.getMinutes()) + ":";
            var ss =
                date.getSeconds() < 10
                    ? "0" + date.getSeconds()
                    : date.getSeconds();
            return YY + MM + DD + " " + hh + mm + ss;
        }
    }
};
</script>

<style lang="scss" scoped>
 .el-select-dropdown__item {
        background-color: #ffffff;
        padding: 0;
    }
    .overflow{
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #535353;
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #ededed;
        }
    }

    .el-dropdown-menu{
        left: 718px;
        width: 13%;
        .popper__arrow{
            left: 4px;
        }
    }
    
</style>