仿喔趣人事通排班
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="public/element/index.css">
<link rel="stylesheet" href="css/base.css">
<script src="public/vue.min.js"></script>
<script src="public/jquery-3.1.1.js"></script>
<script src="moment.js"></script>
<script src="public/element/index.js"></script>
</head>
<style>
html{overflow: hidden;}
.content{box-sizing: border-box;width: 100%;height: 100%;position: relative;display: flex;}
.left_side {position: relative; width: 200px;resize: horizontal;box-sizing: border-box;}
.right_side {width: calc(100vw - 200px);box-sizing: border-box; overflow-x: auto; }
.move_line {width: 4px;background-color: #dee2e8;cursor: e-resize;align-items: center;display: flex;justify-content: center;z-index: 9;}
.move_line:hover{background-color: #0189fa;}
.move_line:hover .el-icon-rank,#bottom_line:hover .bottom_tip{color: #0189fa;}
.move_line .el-icon-rank{background-color: #ffffff;z-index: 999;}
#bottom_line{width: 100%;height: 4px;cursor: s-resize;}
.title_btn{position: absolute;right: 0;top: 10px;background-color: #ffffff;padding: 10px;cursor: pointer;}
.color_org{color: #fcb801;}
.color_blue,.title_btn:hover i,.popover_item:hover{color: #27a9f8;}
.el-table thead td, .el-table thead th.is-leaf ,.el-table tbody td, .el-table tbody th.is-leaf {border-bottom: 1px solid #ebeef5;height: 55px!important;padding: 0!important;font-size: 12px;}
.hour_item{height: 50px; white-space: nowrap;background-color: rgb(234, 232, 247);display: flex;flex-direction: column;justify-content: center;overflow: hidden;text-overflow: ellipsis;align-items: center;padding: 0 4px;line-height: 20px;}
.el-pagination{padding: 10px;border-top: 1px solid #eaedf2;}
.title_checkbox{margin-bottom: 6px;}
.bottom_side{min-height: 20px;}
.top_setting{background-color: #ffffff;z-index: 99;padding: 12px;}
.bottom_heander{background: #fafafa;border-bottom: 1px solid #ddd;color: #404040;height: 34px;line-height: 34px;padding: 0 12px;}
.bottom_header_icon{cursor: pointer;}
.bottom_show{position: fixed;bottom: -5000px;}
.popover_item{padding: 4px 0;cursor: pointer;}
.popover_item.del,.popover_item.del:hover{color: #fa7075;}
.radio_text{background: #d9001b;border-radius: 2px;color: #fff;display: inline-block;font-size: 12px;font-weight: 400;height: 14px;line-height: 14px; margin-left: 3px;text-align: center;width: 14px;}
.el-table .el-date-editor.el-input,.el-table .el-date-editor.el-input__inner {width: 120px;}
.left_side .el-table__body-wrapper ::-webkit-scrollbar { width: 0; background: rgba(213,215,220,0.3);border: none;}
.left_side .el-table__body-wrapper ::-webkit-scrollbar-track { border: none;}
.left_side .el-table th.gutter{display: none; width:0}
.left_side .el-table colgroup col[name='gutter']{display: none;width: 0;}
.left_side .el-table__body{width: 100% !important;}
.left_side .el-table--scrollable-y .el-table__body-wrapper {overflow-y: hidden;}
.is_select{background-color: transparent !important;box-shadow: 2px 2px #057aff inset, -3px -3px #057aff inset !important;}
.none_work{background-color: #ffffff;}
.rest_work{background-image: repeating-linear-gradient(-45deg, rgb(224, 229, 230), rgb(245, 245, 245) 1px, rgb(245, 245, 245) 3px, rgb(224, 229, 230) 4px);}
.none_work,.rest_work{ display: flex;align-items: center;justify-content: center;}
.bottom_tip{z-index: 9;background: #ffffff;}
.bottom_table{height: auto;}
.bottom_table .right_table tr td:first-child{display: none;}
.bottom_table .left_side td{border-bottom: 1px solid #ebeef5;background: #f5f7fa;color: #909399;font-weight: bold;}
.bottom_table .left_side td .cell{text-align: left;padding-left: 10px;}
.bottom_table .right_side{overflow: hidden;}
.right_table {position: relative;overflow: scroll;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;max-width: 100%;font-size: 14px;color: #606266;width: 100%;border: 1px solid #ebeef5;border-collapse: collapse;}
.right_table tr {border-bottom: 1px solid #ebeef5;height: 55px !important;padding: 0 !important;font-size: 12px;box-sizing: border-box;text-overflow: ellipsis;vertical-align: middle;position: relative;}
.right_table td {border: 1px solid #ebeef5;}
.right_table .cell {display: inline-block;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;vertical-align: middle;padding: 1px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;word-break: break-all;line-height: 23px;min-width: 80px}
.right_table thead .cell{text-align: center;font-weight: bold;}
.right_side .el-table .cell,.right_side .el-table--border .el-table__cell:first-child .cell {padding-right: 2px;padding-left: 2px;}
</style>
<body>
<div id="app">
<!-- 头部操作栏 -->
<div class="top_setting">
<!-- 选择日期 -->
<el-date-picker v-model="daterange" type="daterange" align="right" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate"></el-date-picker>
<!-- 切换选择日周月 -->
<el-radio-group v-model="radio" @change="change_time">
<el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
</el-radio-group>
<!-- 展示汇总数据 -->
<!-- <el-popover placement="top-start" width="200" trigger="click">
<div>
<el-checkbox v-model="date_checkbox" @change="show_default_data" class="title_checkbox">显示汇总数据
</el-checkbox>
<el-checkbox v-model="calendar_checkbox">显示个人日历</el-checkbox>
</div>
<el-button slot="reference" plain icon="el-icon-s-grid"></el-button>
</el-popover> -->
</div>
<!-- 表格 -->
<div class="box">
<!-- 表格上半部分 -->
<section class="content" id="top_side" ref="content">
<!-- 左侧表格 -->
<aside class="left_side" id="left_side">
<el-table ref="multipleTable" :height="left_table" id="left_table" border :data="tableData" tooltip-effect="dark"
style="width: 100%">
<el-table-column v-for="column in selectionArr" :fixed="column.fixed" :prop="column.prop"
v-if="column.isShow" :label="column.label" :width="column.width">
</el-table-column>
</el-table>
<p class="title_btn" @click="table_header_edit"><i class="el-icon-setting f20"></i></p>
</aside>
<!-- 中间拖拽线 -->
<div id="line" class="move_line" ref="line" style="left: 295px;">
<i class="el-icon-rank f20 color_gray"></i>
</div>
<!-- 右侧表格 -->
<main class="right_side" id="right_side">
<el-table border ref="right_table" :height="right_table" id="right_table" :data="right_tableDate" tooltip-effect="dark" style="width: 100%" >
<el-table-column v-for="(column,index) in date_arr" :label="column.week_name+column.date" :render-header="(h, obj) => renderHeader(h, obj, column.week_name, column.date)">
<template slot-scope="scope">
{{scope.row.list[index].work_type}}
</template>
</el-table-column>
</el-table>
</main>
</section>
<!-- 汇总数据展示 -->
<div :class="date_checkbox == true?'':'bottom_show'">
<!-- 中间拖拽线 -->
<div id="bottom_line" class="move_line bottom_line"><span class="color_gray bottom_tip">汇总数据</span></div>
<!-- 汇总数据表格 -->
<div id="bottom_side" class="bottom_side">
<el-row type="flex" justify="space-between" align="middle" class="bottom_heander">
<p class="f_bold">所有页汇总（12人）</p>
<i class="el-icon-close bottom_header_icon" @click="close_bottom_content"></i>
</el-row>
<div class="content bottom_table">
<!-- <table class="left_side">
<tr v-for="(val, key) in stats_list">
<td >
<div class="cell">{{val[0]}}</div>
</td>
</tr>
</table> -->
<div class="right_side" ref="bottm_scroll">
<!-- <table class="right_table">
<tr v-for="(val, key) in stats_list">
<td v-for="(v,k) in val">
<div class="cell"><div >{{v}}</div></div>
</td>
</tr>
</table> -->
</div>
</div>
</div>
</div>
</div>
<!-- 弹出层 - 头部操作栏 -->
<el-dialog title="头部操作栏" :visible.sync="setting_pop" width="50%">
<div>
<el-checkbox-group v-model="checkedOptions">
<el-checkbox v-for="item in tableTitleList" :key="item.prop" :label="item.label"
v-model="item.isShow" :disabled="item.disabled">
</el-checkbox>
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="setting_pop = false">取 消</el-button>
<el-button type="primary" @click="confirm_header_edit_pop">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
daterange: "",//日期区间
radio: "",//日周月选择
date_checkbox: true,//展示汇总数据
calendar_checkbox: true,//展示个人日历
left_table: "",//左侧表格动态高度
right_table: "",//右侧表格动态高度
date_arr: [],//右侧表格表头动态数据
selectionArr: [],//左侧表格表头动态勾选数据
checkedOptions: ["姓名", "工号"],//左侧表格表头动态默认勾选数据
//左侧表格表头数据
tableTitleList: [{
prop: "name",
label: "姓名",
widthEnable: false,
isShow: true,
disabled: true
},
{
prop: "apartment",
label: "岗位名称",
widthEnable: false,
isShow: true,
width: "150",
},
{
prop: "work",
label: "所属组织单元",
widthEnable: false,
isShow: true,
width: "150",
},
{
prop: "number",
label: "工号",
widthEnable: false,
isShow: true,
width: "150",
disabled: true
},
],
// 表格数据
tableData: [
{
// 左侧表头名字
id: 0,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},{
// 左侧表头名字
id: 1,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},{
// 左侧表头名字
id: 2,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},{
// 左侧表头名字
id: 3,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},
],
right_tableDate:[
{
// 左侧表头名字
id: 0,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},{
// 左侧表头名字
id: 1,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},{
// 左侧表头名字
id: 2,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},{
// 左侧表头名字
id: 3,
name: "姓名1",
apartment: "岗位名称1",
work: "所属组织单元1",
number:"工号1",
// 右侧表格数据
list: [
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:0,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:1,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:2,strat_time:"7:00",end_time:"18:00" },
{work_type:1,is_select:false,is_type:0,strat_time:"7:00",end_time:"18:00" },
],
},
],
multipleSelection: [],//表格左侧勾选数据
setting_pop: false,//弹出层 - 头部操作栏
}
},
created() {
},
mounted() {
// 获取本周数据
this.radio = '周';
this.get_week()
// 左侧表格自动选中
this.getChecked()
// 获取高度
this.get_height()
// 加载拖拽事件
this.drag_x()
this.drag_y()
// 底部表格滚动距离
window.addEventListener('scroll', this.scrollChange, true)
},
methods: {
// 监听底部表格滚动距离
scrollChange(){
const bottom_scroll = this.$refs['bottm_scroll']
const left_scroll = this.$refs.multipleTable.bodyWrapper
const right_scorll = this.$refs.right_table.bodyWrapper
bottom_scroll.scrollLeft = right_scorll.scrollLeft;
left_scroll.scrollTop = right_scorll.scrollTop
},
// 右侧表格 - 表头判断周几，添加样式
renderHeader(h, para, text1, text2) {
if(text1 == '星期六' || text1 == '星期日'){
return h('p', {
attrs: {
class: 't_center',
},
domProps: {
innerHTML: '<span class="color_org">' + text1 + '</span>' + '</br>' + '<span class="color_org">' + text2 + '</span>',
},
})
}else{
return h('p', {
attrs: {
class: 't_center',
},
domProps: {
innerHTML: '<span class="color_blue">' + text1 + '</span>' + '</br>' + '<span class="color_blue">' + text2 + '</span>',
},
})
}
},
// 默认获取高度
get_height() {
this.$refs.content.style.height = 'calc(100vh - 130px)';
this.left_table = $('.left_side').height()
this.right_table = $('.right_side').height()
this.$nextTick(() => {
this.$refs["right_table"].doLayout();
this.$refs["multipleTable"].doLayout();
});
},
// x轴的拖拽移动
drag_x: function () {
let move_line = document.getElementsByClassName('move_line');
let left_side = document.getElementsByClassName('left_side');
let right_side = document.getElementsByClassName('right_side');
let content = document.getElementsByClassName('content');
for (let i = 0; i < move_line.length; i++) {
// 鼠标按下事件
move_line[i].onmousedown = function (e) {
let startX = e.clientX;
move_line[i].left_side = move_line[i].offsetLeft;
// 鼠标拖动事件
document.onmousemove = function (e) {
let endX = e.clientX;
let moveLen = move_line[i].left_side + (endX -
startX
); // （endx-startx）=移动的距离。move_line[i].left_side+移动的距离=左边区域最后的宽度
let maxT = content[i].clientWidth - move_line[i]
.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
move_line[i].style.left_side = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left_side.length; j++) {
left_side[j].style.width = moveLen + 'px';
right_side[j].style.width = (content[i].clientWidth - moveLen -
10) + 'px';
}
};
// 鼠标松开事件
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
move_line[i].releaseCapture && move_line[i]
.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
move_line[i].setCapture && move_line[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
},
// y轴的拖拽移动
drag_y: function () {
let bottom_line = document.getElementsByClassName('bottom_line');
let top_side = document.getElementById('top_side');
let bottom_side = document.getElementById('bottom_side');
let left_table = document.getElementById('left_table');
let right_table = document.getElementById('right_table');
for (let i = 0; i < bottom_line.length; i++) {
bottom_line[i].onmousedown = function (e) {
var iEvent = e || event;
var dx = iEvent.clientY;
var topHeight = top_side.offsetHeight;
var bottomHeight = bottom_side.offsetHeight;
document.onmousemove = function (e) {
var iEvent = e || event;
var diff = iEvent.clientY - dx;
top_side.style.height = (topHeight + diff) + 'px';
bottom_side.style.height = (bottomHeight - diff) + 'px';
left_table.style.height = (topHeight + diff) + 'px';
right_table.style.height = (topHeight + diff) + 'px';
};
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}
}
},
// 左侧表格 - 员工姓名操作
table_header_edit() {
this.setting_pop = true;
this.left_table = $('.left_side').height()
},
// 头部 - 是否展示默认数据
show_default_data() {
this.get_height()
let _height = $('.left_side').height()
$("#left_table").css("height", _height);
$("#right_table").css("height", _height+'px');
},
// 汇总数据 - 关闭按钮
close_bottom_content() {
this.date_checkbox = false
this.get_height()
let _height = $('.left_side').height()
$("#left_table").css("height", _height);
$("#right_table").css("height", _height+'px');
},
// 获取左侧表格头部选中的对象
getChecked() {
this.selectionArr = [];
for (var i = 0; i < this.tableTitleList.length; i++) {
for (var j = 0; j < this.checkedOptions.length; j++) {
if (this.checkedOptions[j] === this.tableTitleList[i].label) { //label为数据里唯一值，可替换
this.selectionArr.push(this.tableTitleList[i])
}
}
}
},
// 左侧表格头部编辑弹出层
confirm_header_edit_pop() {
this.getChecked();
this.setting_pop = false
},
// 选择日周月
change_time(val) {
switch (val) {
case '日':
this.date_arr.splice(0)
this.$nextTick(() => {
this.get_today()
this.get_height()
})
break;
case '周':
this.date_arr.splice(0)
this.$nextTick(() => {
this.get_week()
this.get_height()
})
break;
case '月':
this.date_arr.splice(0)
this.$nextTick(() => {
this.get_month()
this.get_height()
})
break;
}
},
// 头部 - 时间选择器
changeDate() {
this.date_arr.splice(0)
this.$alert('是否切换到所选日期区间？', '提示信息', {
confirmButtonText: '确定',
callback: action => {
this.date_arr = this.enumerateDaysBetweenDates(
this.daterange[0], // this.daterange是日期范围
this.daterange[1]
)
}
})
},
// 获取任意两个日期中的所有日期
enumerateDaysBetweenDates(startDate, endDate) {
let daysList = [];
const start = moment(startDate);
const end = moment(endDate);
const day = end.diff(start, "days");
let obj = {
week_name: start.format("dddd"),
date: start.format("MM/DD"),
}
daysList.push(obj);
for (let i = 1; i <= day; i++) {
let _start = start.add(1, "days");
let _item = {
week_name: _start.format("dddd"),
date: _start.format("MM/DD"),
}
daysList.push(_item)
}
return daysList;
},
// 获取今天的日期
get_today() {
this.date_arr.splice(0)
let todayObj = {
week_name: moment().format('dddd'),
date: moment(new Date()).add('year', 0).format("MM/DD")
}
this.date_arr.push(todayObj)
},
// 获取本周
get_week() {
this.date_arr.splice(0)
for (var i = 0; i < 7; i++) {
let _date = moment().week(moment().week()).startOf("week").add(i, "days").valueOf()
let todayObj = {
week_name: moment(_date).format('dddd'),
date: moment(_date).format('MM/DD')
}
this.date_arr.push(todayObj)
}
},
// 获取本月
get_month() {
this.date_arr.splice(0)
// 当前月天数
let daysInMonth = moment().month(moment().month()).daysInMonth();
for (var i = 0; i < daysInMonth; i++) {
let _date = moment().month(moment().month()).startOf("month").add(i, "days").valueOf()
let todayObj = {
week_name: moment(_date).format('dddd'),
date: moment(_date).format('MM/DD')
}
this.date_arr.push(todayObj)
}
},
},
});
</script>
</html>
！！
浙公网安备 33010602011771号