练手用过的,防止忘记
<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>