使用vue实现日程安排表

效果图：

planTable.js

let days = ["21-05", "21-06", "21-07", "21-08", "21-09", "21-10","21-11"]
let plans = ["计划一", "计划二", "计划三"]
// let times = ['7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00']
let meeting = [// 安排的数组，开始时间和持续时间，标题[{index:0,days:"21-05",subject: '111',start:0,time: 5, //定义需要的天数pass: 0}],[{index:1,days:"21-06",subject: "222",start:1,time: 5, pass: 1}],[{index:2,days:"21-07",subject: "333",start: 2,time:3,pass: 2}]
]
export {days,plans,meeting,
}

plan组件

<template><div class="father"><span class="commonTop">工作计划</span><!-- 工作计划 --><table :style="{ height: myhoverHeight }" class="mytable"><thead class="mythead"><tr><th></th><!-- 动态绑定伪元素，与scss样式交互 --><th:style="{ '--hoverHeight': myhoverHeight + 'px' }"v-for="i in days":key="i + '' + Math.random()">{{ i }}</th></tr></thead><tbody><trv-for="(i, index) in info":key="i + new Date().valueOf() + Math.random() + ''"><th class="plans" scope="col">{{ plans[index] }}</th><tdv-for="j in i":colspan="j == 1 ? 1 : j['time']":key="Math.random() + j + new Date().valueOf() + ''":class="j.pass == 0? 'cell1': j.pass == 1? 'cell2': j.pass == 2? 'cell3': 'cell'"><div>{{meeting[index][0].days === j.days? meeting[index][0].subject: ""}}</div><!-- v-for="(j, inindex) in i"{{ meeting[index][0].index === inindex ? meeting[index][0].subject : "" }} --></td></tr></tbody></table><!-- 工作计划 --></div>
</template>
<script>
import { days, plans, meeting } from "@/utils/planTable.js";
export default {data() {return {info: [],days: days,plans: plans,meeting: meeting,hoverHeight: 0,};},computed: {myhoverHeight() {return this.hoverHeight;},},mounted() {// 工作计划表// 根据预约信息数组，处理成表格可以使用的形式// 预约信息是该周每天的预约情况，0-6表示星期一到星期天let info = [],xLength = this.days.length,yLength = this.plans.length;for (let i = 0; i < yLength; i++) {info[i] = [];for (let j = 0; j < xLength; j++) {info[i].push(1);}}for (let i = 0; i < yLength; i++) {//x周let m = meeting[i];for (let k of m) {info[k.start][i] = k;}}this.info = info;this.hoverHeight = 90 * yLength + yLength * 20;},
};
</script>
<style lang="scss" scoped>
// 工作计划
.mytable {width: 100%;.mythead {th {width: 90px;font-size: 18px;color: rgb(121, 120, 120);text-align: center;border-right: 1px solid #eee;line-height: 55px;position: relative;&::after {content: "";width: 1px;top: 55px;left: -3px;height: var(--hoverHeight);position: absolute;background: #eee;}}th:last-child {&::before {content: "";width: 1px;right: -1px;top: 55px;height: var(--hoverHeight);position: absolute;background: #eee;}}}td {width: 90px;line-height: 90px;border: none;padding: 10px 0px;}
}
tbody * {padding: 0;.plans {font-size: 18px;color: rgb(121, 120, 120);}
}
.mytd:hover {/*background: red;*/border: 2px solid blue;
}
// 针对不同状态的的样式
.cell {opacity: 0;
}
.cell1 {div {align-items: center;vertical-align: middle;background: #fff5ef;box-sizing: border-box;border-left: 3px solid #f88d4e !important;}
}
.cell2 {div {background: #e5faf1;box-sizing: border-box;border-left: 3px solid #76fac1 !important;}
}
.cell3 {div {background: #e7f2fc;box-sizing: border-box;border-left: 3px solid #80bff8 !important;}
}
// 工作计划
</style>

使用：在父组件中直接注册调用

参考：https://my.oschina.net/ahaoboy/blog/1805614

记录其它知识点

1、table表格设置border边框重复问题

外表格样式：<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;”>
内表格样式：<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;border-width:0px; border-style:hidden;">

2、scss与定义的数据交互使用：上述代码中有

使用vue实现日程安排表相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
Vue 自定义权限指令
前述虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现这里由于我的项目做了动态权限,页面的按钮也需要根据 ...
vue响应式给数组中的对象添加新属性
需要使用到vue的全局api $set(item,'newParam','value')方法 group: [ // 对象数组{ id: '1', name: '任务1' ,disable: fals ...

使用vue实现日程安排表

使用vue实现日程安排表相关推荐

最新文章

热门文章