【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226

MyClassroom.vue 使用组件方法实现增删改查。

<template><div class="container"><div class="row py-4 align-items-center"><!--展示显示人员--><div class="col-lg-12 col-md-12 mt-0 table-responsive "  style="background-color: #fff;"><!--表单--><h2>教室简介</h2><div class="todo-header"><input type="text" placeholder="请输入教室名称，按回车键添加" v-model="title" @keyup.enter="add($event)"/><button @click="add">增加</button></div><table class="table table-striped table-sm table-bordered text-center "><tr class="row" style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;"><th class="col-2">教室</th><th class="col-1">教室区域</th><th class="col-1">教室地址</th><th class="col-2">教室设备</th><th class="col-1">可容纳人数</th><th class="col-1">公开借订</th><th class="col-2">备注</th><th class="col-2">教室照片</th></tr><tr class="row" v-for='cr in classroomList' :key="cr.clid" valign="middle"  style="color:Black;border-color:#E0E0E0;font-size:15px;"><td class="col-2"><!-- <router-link  v-show="!cr.isEdit" to="/classroomQuery" >{{ cr.classroom_name }}</router-link> --><span  v-show="!cr.isEdit" @dblclick="editClassroom(cr)">{{ cr.classroom_name }}</span><input v-show="cr.isEdit" type="text" style="width:150px;" :value="cr.classroom_name" @blur="handleBlur_classroom(cr,'classroom_name',$event)"  ref="inputTitle"><div class="mt-3"><button @click="deleteClassroom(cr.clid)">删除</button></div></td><td class="col-1"><span v-show="!cr.isEdit" @dblclick="editClassroom(cr)">{{ cr.classroom_location }}</span><input v-show="cr.isEdit" type="text" style="width:100px;" :value="cr.classroom_location" @blur="handleBlur_classroom(cr,'classroom_location',$event)"  ref="inputTitle"></td><td class="col-1"><span  v-show="!cr.isEdit" @dblclick="editClassroom(cr)">{{ cr.classroom_address }}</span><input v-show="cr.isEdit" type="text" style="width:100px;" :value="cr.classroom_address" @blur="handleBlur_classroom(cr,'classroom_address',$event)"  ref="inputTitle"></td><td class="col-2"><span  v-show="!cr.isEdit" @dblclick="editClassroom(cr)">{{ cr.classroom_equipment }}</span><input v-show="cr.isEdit" type="text" style="width:150px;" :value="cr.classroom_equipment" @blur="handleBlur_classroom(cr,'classroom_equipment',$event)"  ref="inputTitle"></td><td class="col-1"><span  v-show="!cr.isEdit" @dblclick="editClassroom(cr)">{{ cr.classroom_person_hc }}</span><input v-show="cr.isEdit" type="text" style="width:100px;" :value="cr.classroom_person_hc" @blur="handleBlur_classroom(cr,'classroom_person_hc',$event)"  ref="inputTitle"></td><td class="col-1"><span  v-show="!cr.isEdit" @dblclick="editClassroom(cr)">{{ cr.classroom_public }}</span><input v-show="cr.isEdit" type="text" style="width:100px;" :value="cr.classroom_public" @blur="handleBlur_classroom(cr,'classroom_public',$event)"  ref="inputTitle"></td><td class="col-2"><a target="_blank" :href="cr.classroom_remark1" >教室影片</a></td><td class="col-2" style="width:200px;"><a target="_blank" :href='cr.classroom_photo_1' ><img :src='cr.classroom_photo_1' alt="photo" width="180px"></a></td></tr></table></div></div></div>
</template><script>import { nanoid } from 'nanoid';export default {name:'MyClassroom',data(){return{title:'',classroomList:[{clid:nanoid(),classroom_id:'TC-01',classroom_name:'TC-01.教室1',classroom_location:'CN',classroom_address:'2F',classroom_equipment:'投影设备1套',classroom_person_hc:'50',classroom_public:'N',classroom_active:'Y',classroom_remark1:"TBD",classroom_photo_1: "/photo/photo.png",},{clid:nanoid(),classroom_id:'TC-02',classroom_name:'TC-02.教室2',classroom_location:'CN',classroom_address:'2F',classroom_equipment:'投影设备1套',classroom_person_hc:'50',classroom_public:'N',classroom_active:'Y',classroom_remark1:"TBD",classroom_photo_1:'/photo/photo.png',},{clid:nanoid(),classroom_id:'TC-03',classroom_name:'TC-03.教室3',classroom_location:'CN',classroom_address:'2F',classroom_equipment:'投影设备1套',classroom_person_hc:'50',classroom_public:'N',classroom_active:'Y',classroom_remark1:"TBD",classroom_photo_1:'/photo/photo.png',},],}},methods:{deleteClassroom(clid){this.classroomList = this.classroomList.filter(classroom=>classroom.clid != clid)},editClassroom(cr){if(cr.hasOwnProperty('isEdit')){cr.isEdit = true}else{this.$set(cr,'isEdit',true)}// // 当Vue重新编译模板之后执行$nextTick()中的回调函数// this.$nextTick(function(){// // 使input框获取焦点// this.$refs.inputTitle.forEach(element=>element.focus())// // this.$refs.inputTitle.focus()// }// )},handleBlur_classroom(cr,target,e){cr.isEdit = falseconsole.log('updateTodo',cr.id,e.target.value)if(!e.target.value.trim()) return alert('输入不能为空')if(target == 'classroom_name'){cr.classroom_name = e.target.value}else if(target == 'classroom_location'){cr.classroom_location = e.target.value}else if(target == 'classroom_address'){cr.classroom_address = e.target.value}else if(target == 'classroom_equipment'){cr.classroom_equipment = e.target.value}else if(target == 'classroom_person_hc'){cr.classroom_person_hc = e.target.value}else if(target == 'classroom_public'){cr.classroom_public = e.target.value}else if(target == 'classroom_active'){cr.classroom_active = e.target.value}},// handleBlur_classroom_location(cr,e){//   cr.isEdit = false//    console.log('updateTodo',cr.id,e.target.value)//  if(!e.target.value.trim()) return alert('输入不能为空')//   cr.classroom_location = e.target.value// },add(e){console.log('新增教室名称',this.title)while(this.title === '')return alert('输入不能为空')this.classroomList.push({clid:nanoid(),classroom_id:this.title.split('.')[0],classroom_name:this.title,classroom_location:'TBD',classroom_address:'TBD',classroom_equipment:'TBD',classroom_person_hc:'TBD',classroom_public:'TBD',classroom_active:'TBD',classroom_remark1:"TBD",classroom_photo_1:'/photo/photo.png',},)this.title = ''console.log('清空')// this.$emit('addTodo',NewObj)},},}
</script><style>
</style>

【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226相关推荐

Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
HibernateTemplate、HibernateDaoSupport两种方法实现增删改查Good
Spring+Hibernate两种方法实现增删改查首先,定义一个Customer的bean类,设置好Customer.hbm.xml文件.再定义好一个Dao接口.准备好一个jdbc.propert ...
VUE+Spring Boot前后端分离开发实战(五)：基于shiro鉴权的角色增删改查(CURD)-封装分页组件和所有增删改查模块化
文章目录前言后端实现前端实现分页组件封装增删改查模块化角色管理页面实现效果前言本文在上文基础上把查询.增加.修改以及删除的请求封装在table.js中,实现了所有用到增删改查页面代码 ...
vue结合php增删改查实例,从vue基础开始创建一个简单的增删改查的实例
1.安装vue-clicnpm install vue-cli -g --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目 ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
springboot pom文件添加mysql组件_SpringBoot整合mybatis-plus+druid组件，实现增删改查
前言本篇文章主要介绍的是SpringBoot整合mybatis-plus,实现增删改查. GitHub源码链接位于文章底部. 建库建表创建springboot数据库,创建t_user表,字段id主 ...
es java 增删改查_【java作业】如何用序列化的方法写增删改查
培训19天的时候老师布置了一个用序列化反序列化做学生管理系统的作业.百度没找到怎么写,后来老师写了一份,我就贴出来吧.对蠢萌蠢萌.纱布拉基的我来说真TM难首先你的包和里面的类是跟下图这样的:Work ...
JS数组的使用方法之增删改查
1.数组的三要素元素:数组存储的数据下标:元素的位置(下标从0 开始) 长度:元素的数量(长度=最大下标+1) 数组的语法: (1).数组声明: let 数组名 = [元素1,元素2,元素3,-] ...
jdbc增删改查有哪些步骤_JDBC打造通用增删改方法
[JDBC]打造通用增删改方法原创简介:在我们学习JDBC的时候或者编写简单的Servlet程序的时候,经常需要增删改查等操作,很多小伙伴的做法是:增删改查各写一个方法,这样写虽然可以实现我们想要的 ...

【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226

MyClassroom.vue 使用组件方法实现增删改查。

【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226相关推荐

最新文章

热门文章