vue+element的表格（el-table）排班情况表（2024-05-09）

2024-05-09 22:52
文章标签 javascript vue 表格 05 2024 table el frontend element 09 排班 情况表

本文主要是介绍vue+element的表格（el-table）排班情况表（2024-05-09），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue+element的表格（el-table）排班情况，增删查改等简单功能

代码：

<template><!-- 表格 --><div class="sedules"><el-header><el-date-pickerv-model="monthValue2"type="month"placeholder="选择月"value-format="yyyy-M"@change="changeMonth"></el-date-picker><el-date-pickerstyle="margin-left: 10px;"v-model="weekValue1"type="week"format="第 WW 周"placeholder="选择周"@change="changeWeek"></el-date-picker></el-header><div class="table-content"><el-tablev-loading="loading"class="sedules-table":data="persons"borderheight="300"><el-table-columnprop="name"width="150"align="center"label="姓名/日期"fixed><template slot-scope="{row}"><span :class="row.name === '+'?'cur':''" @click="clicksName(row)">{{ row.name }}</span></template></el-table-column><template v-for="(col,i) in nowMonthDays"><el-table-column:show-overflow-tooltip="true":label="col.date":key="col.date"width="100"align="center"><template slot-scope="{row}"><span v-if="filed(col, row).show" class="row-tag" @click="showLog(filed(col, row))"><i class="el-icon-close" @click.stop="handleCloseTag(filed(col, row))"></i><el-tag v-if="filed(col, row).typeId === 0"> 白班 </el-tag><el-tag v-else-if="filed(col, row).typeId === 1" type="success"> 中班 </el-tag><el-tag v-else-if="filed(col, row).typeId === 2" type="danger"> 晚班 </el-tag><span v-else> </span></span><i class="icon-plus row-tag" v-else @click="showLog(filed(col, row))">&ensp;</i></template></el-table-column></template></el-table></div><!-- 添加或修改对话框 --><el-dialog :title="title" :visible.sync="open" width="30%" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="120px"><el-form-item label="姓名" prop="name"><el-input style="width: 220px;" v-model="form.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="日期" prop="day"><el-date-pickerv-model="form.day"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="请选择日期"clearable/></el-form-item><el-form-item label="排班情况" prop="typeName"><el-select v-model="form.typeName" clearable placeholder="请选择" @change="$forceUpdate()"><el-optionv-for="dict in sys_day_type":key="dict.value":label="dict.label":value="dict.value"@click.native="getTypeName(dict)"/></el-select></el-form-item><!--        <el-form-item label="备注" v-show="false">--><!--          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>--><!--        </el-form-item>--></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submit">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template>
<script>
import calendar from '@/utils/js-calendar-converter.js'export default {name: 'paiban',data() {return {insDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),weekValue1: '',monthValue2: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),loading: false,title: '排班',form: {},// 是否显示弹出层open: false,year: new Date().getFullYear(),month: new Date().getMonth() + 1,weeksArr: ['日', '一', '二', '三', '四', '五', '六'],nowMonthDays: [],persons: [{'id': this.$uuid(),'name': '刘旺','list': [{ day: '2024-5-2', typeName: '白班', typeId: 0 },{ day: '2024-5-6', typeName: '晚班', typeId: 2 },{ day: '2024-5-7', typeName: '晚班', typeId: 2 },{ day: '2024-5-9', typeName: '晚班', typeId: 2 }]},{'id': this.$uuid(),'name': '王安','list': [{ day: '2024-5-2', typeName: '白班', typeId: 0 },{ day: '2024-5-6', typeName: '中班', typeId: 1 },{ day: '2024-5-12', typeName: '中班', typeId: 1 }]},{'id': this.$uuid(),'name': '王二麻子','list': [{ day: '2024-5-2', typeName: '白班', typeId: 0 },{ day: '2024-5-6', typeName: '中班', typeId: 2 },{ day: '2024-5-7', typeName: '中班', typeId: 2 }]},{'id': this.$uuid(),'name': '张三','list': [{ day: '2024-5-2', typeName: '白班', typeId: 0 },  // 白班{ day: '2024-5-6', typeName: '白班', typeId: 1 },   // 白班{ day: '2024-5-7', typeName: '中班', typeId: 1 },  // 中班{ day: '2024-5-8', typeName: '晚班', typeId: 2 }]   // 晚班},{'id': this.$uuid(),'name': '李四','list': [{ day: '2024-5-2', typeName: '白班', typeId: 0 },{ day: '2024-5-6', typeName: '晚班', typeId: 2 },{ day: '2024-5-7', typeName: '晚班', typeId: 2 },{ day: '2024-5-9', typeName: '晚班', typeId: 2 }]},{'id': this.$uuid(),'name': '王二麻子','list': [{ day: '2024-5-2', typeName: '白班', typeId: 0 },{ day: '2024-5-6', typeName: '中班', typeId: 2 },{ day: '2024-5-7', typeName: '中班', typeId: 2 }]}],sys_day_type: [{ value: 0, label: '白班' },{ value: 1, label: '中班' },{ value: 2, label: '晚班' }],// 表单校验rules: {day: [{ required: true, message: '日期不能为空', trigger: 'blur' }],typeName: [{ required: true, message: '排班情况不能为空', trigger: 'blur' }]},timeRange: []}},computed: {},mounted() {this.persons = this.persons.map((two) => {two.list.unshift({})return two})this.persons.push({id: this.$uuid(),name: '+',list: []})this.getNowMonthDays(this.year, this.month)},methods: {clicksName(val) {debuggerthis.open = truethis.title = "新增排班"},changeWeek(val) {this.timeRange = []if (val) {// 时间选择器按周const { year, month, day } = this.getMonday('s', 0, val)const { year: year1, month: month1, day: day1 } = this.getMonday('e', 0, val)for (let i = 0; i < 7; i++) {this.timeRange.push(day + i)}this.monthValue2 = ''this.getNowMonthDays(this.year, this.month, this.timeRange)} else {this.monthValue2 = this.insDatethis.getNowMonthDays(this.year, this.month)}},changeMonth(val) {const [yy, mm] = val.split('-')this.getNowMonthDays((yy - 0), (mm - 0))this.weekValue1 = ''},/*方法：得到本周、上周、下周的起始、结束日期参数：type为字符串类型，有两种选择，"s"代表开始,"e"代表结束，dates为数字类型，不传或0代表本周，-1代表上currentTime：当前时间Mon Apr 01 2024 00:00:00 GMT+0800 (GMT+08:00)使用方法： console.log('本周结束日期',getDateFn.getMonday('e'));console.log('上周开始日期',getDateFn.getMonday('s',-1))*/getMonday(type, dates, currentTime) {var now = currentTime || new Date()var nowTime = now.getTime()var day = now.getDay()var longTime = 24 * 60 * 60 * 1000var n = longTime * 7 * (dates || 0)if (type == 's') {var dd = nowTime - (day - 1) * longTime + n}if (type == 'e') {var dd = nowTime + (7 - day) * longTime + n}dd = new Date(dd)var y = dd.getFullYear()var m = dd.getMonth() + 1var d = dd.getDate()console.log(dd)// m = m < 10 ? '0' + m : m// d = d < 10 ? '0' + d : d// var day = y + '-' + m + '-' + dreturn { day: d - 1, year: y, month: m }},handleCloseTag(col) {const that = thisthis.$confirm('此操作删除记录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {that.persons = that.persons.map((person) => {if (person.name === col.name) {person.list = person.list.filter((per) => {if (per.day !== col.day) {return per}})}return person})this.$message({type: 'success',message: '删除成功!'})}).catch(() => {})},getTypeName(item) {this.form.typeId = item.valuethis.form.typeName = item.label},filed(col, row) {let rows = row.list.find((one) => {if (one.day === col.day) {return one}})if (rows) {const rt1 = { show: true, ...rows, ...col, ...row }return rt1} else {const rt2 = { show: false, ...col, ...row }return rt2}},showLog(col) {console.log(col)this.open = truethis.form = colthis.title = '排班'},submit() {const that = thisthat.persons = that.persons.map((person) => {if (person.name === that.form.name) {const one = person.list.find((per) => {if (per.day === that.form.day) {return per}})if (one) {one.typeId = that.form.typeIdone.typeName = that.form.typeName} else {person.list.push({day: that.form.day,typeId: that.form.typeId,typeName: that.form.typeName})}}return person})this.getNowMonthDays(this.year, this.month, this.timeRange)that.open = false},cancel() {this.open = false},// 获取当月天数getThisMonthDays(year, month) {return new Date(year, month, 0).getDate()},/** 获取当月日期 */getNowMonthDays(year, month, week) {let that = thisconst nowMonthDays = []that.loading = truethat.year = yearthat.month = monthsetTimeout(() => {if (week && week.length) {for (let i in week) {const times = `${year + '-' + month + '-' + week[i]}` // 2023-3-3const lunar = calendar.solar2lunar(year, month, week[i])nowMonthDays.push({id: this.$uuid(),date: week[i] + '号', // 几号week: this.weeksArr[new Date(year, month - 1, week[i]).getDay()], // 星期几day: times,lunar: lunar.IMonthCn + lunar.IDayCn})}} else {let days = that.getThisMonthDays(year, month) // 获取当月的天数for (let i = 1; i <= days; i++) {const d = new Date(year, month - 1, i)const years = d.getFullYear()const months = d.getMonth() + 1const day2 = d.getDate()const times = `${years + '-' + months + '-' + day2}` // 2023-3-3const lunar = calendar.solar2lunar(years, months, day2)// var holidays = ['2024-5-1', '2024-5-2', '2024-5-3', '2024-5-4', '2024-5-5']nowMonthDays.push({id: that.$uuid(),date: i + '号', // 几号week: that.weeksArr[new Date(year, month - 1, i).getDay()], // 星期几day: times,lunar: lunar.IMonthCn + lunar.IDayCn})}}that.nowMonthDays = nowMonthDaysthat.loading = false}, 500)},// 默认显示当前年度getdatatime() {this.value1 = new Date()}}
}
</script>
<style lang="scss" scoped>
.sedules {height: 90%;.el-header {display: flex;justify-content: flex-start;align-content: center;align-items: center;}.table-content {position: relative;width: 100%;height: calc(100% - 40px);}::v-deep.sedules-table.el-table {height: 100% !important;overflow: auto;& .el-table__cell.is-hidden > * {visibility: visible;}.el-table__fixed-body-wrapper {top: 44px !important;}.el-table__body-wrapper {height: calc(100% - 45px) !important;}.cur {cursor: pointer;}.el-table .cell {padding: 0;&.el-tooltip {white-space: nowrap;min-width: 50px;height: 100%;display: block;padding: 0;}}.row-tag {position: relative;display: inline-block;height: 100%;min-height: 20px;cursor: pointer;width: calc(100% - 10px);padding: 0;i.el-icon-close {position: absolute;right: 0;color: transparent;}&:hover {i.el-icon-close {color: #a7a7a7;}}.el-tag {width: 100%;}}}}
</style>

这篇关于vue+element的表格（el-table）排班情况表（2024-05-09）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/974729。

相关文章

Java实现自定义table宽高的示例代码

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格（JTable）作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2