全局路线总线MyClassroom.vue 使用删除方法
关键点1：main.js安装bus
beforeCreate() {
Vue.prototype.$bus = this
}
关键点2：emit发射
methods:{
deleteClassroom2(classroom_name){
this.classroomList = this.classroomList.filter(classroom=>classroom.classroom_name != classroom_name)
},
},
mounted(){
//全局路线总线
this.$bus.$on('deleteClassroom2',this.deleteClassroom2)
},
beforeDestroy(){
//全局路线总线
this.$bus.$off(['deleteClassroom2'])
},
关键点3：emit发射
<button @click="delClassroom('TC-01.教室1')">全线-删除</button>
methods:{
delClassroom(Classroom){
this.$bus.$emit('deleteClassroom2',Classroom)
}
},
main.js
import App from './App.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';
//引入Vuex
import Vuex from 'vuex'
import store from './store'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)
new Vue({
el:'#root',
render: h => h(App),
router,
store,
beforeCreate() {
Vue.prototype.$bus = this
}
})
App.vue
<template>
<div>
<MyNav/>
<button @click="delClassroom('TC-01.教室1')">全线-删除</button>
{{ $store.state.sum }}
{{ $store.state.classroomList.length }}
<MyBanner/>
<keep-alive>
<router-view></router-view>
</keep-alive>
<MyFooter/>
</div>
</template>
<script>
import MyNav from './components/MyNav.vue'
import MyBanner from './components/MyBanner.vue'
import MyFooter from './components/MyFooter.vue'
export default {
name:'App',
components:{
MyNav,
MyBanner,
MyFooter,
},
data(){
return {
myclassroom:'',
}
},
methods:{
delClassroom(Classroom){
this.$bus.$emit('deleteClassroom2',Classroom)
}
},
}
</script>
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 10;
padding: 10;
}
</style>
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>
<button @click="saveClassroom(classroomList)">Vuex-保存</button>
<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:this.$store.state.classroomList,
// 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)
},
deleteClassroom2(classroom_name){
this.classroomList = this.classroomList.filter(classroom=>classroom.classroom_name != classroom_name)
},
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 = false
console.log('updateTodo',cr.classroom_name,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)
},
sendAllClassroom(){
// console.log('this.classroomList',this.classroomList)
return this.classroomList
},
saveClassroom(data){
console.log('saveClassroom',data)
// this.$store.commit('SUBTRACT',this.classroomList)
this.$store.commit('SUBTRACT',data)
}
},
mounted(){
//全局路线总线
this.$bus.$on('deleteClassroom2',this.deleteClassroom2)
},
beforeDestroy(){
//全局路线总线
this.$bus.$off(['deleteClassroom2'])
},
}
</script>
<style>
</style>
1826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
