一、效果
图1
图2，点击报错之后，又变成图1的效果
二、使用到了element UI中的以下组件：
三、使用的关键点是vue中的v-if指令
四、关键代码如下
HTML部分
添加街道
编辑
保存
@click.stop="handleButtonClick(index)">{{item.name}}
JS部分
export default {
name: 'official',
data () {
return {
activeButton: 0,
dialogTitle: '添加街道', // 控制弹出框title的变量
dialogVisible: false, // 弹出框显示隐藏的控制变量
isAddStreet: true, // true表示是添加街道数据，false表示添加的是社区工作站的数据
streetNameOrCommunityName: '', // 添加的时候用于保存街道的名称获取社区工作站的名称
isEditStreet: false, // 编辑街道
isEditCommunity: false, // 编辑社区
streetsData: [
{id: 1, name: '观湖街道'},
{id: 1, name: '民治街道'},
{id: 3, name: '观澜街道'},
{id: 4, name: '龙华街道'},
{id: 5, name: '大浪街道'},
{id: 6, name: '福城街道'}
],
communityData: [
]
}
},
methods: {
handleButtonClick (index) {
this.activeButton = index
},
/**
* flag:0表示添加街道，1表示添加社区
*/
handleShowDialog (flag) {
this.isAddStreet = !flag
this.dialogTitle = flag ? '添加社区工作站' : '添加街道'
this.$nextTick(() => {
this.dialogVisible = true
})
},
addStreetOrCommunity () {
// 校验输入的内容不能为空
if (!this.streetNameOrCommunityName.length) {
this.$message.error('填写的名称不能为空或者空字符串')
return
}
// 1.校验一下当前添加的街道名称是否已经存在？？街道名称是唯一的
// 2.添加成功之后，关闭弹出框，并且要重新请求数据
if (this.isAddStreet) {
// 调用添加街道的接口
this.streetsData.push({id: 10, name: this.streetNameOrCommunityName})
} else {
// 调用社区工作站的接口
munityData.push({id: 10, name: this.streetNameOrCommunityName})
}
// 清空streetNameOrCommunityName的数据，避免下次添加的时候显示上次的数据
this.streetNameOrCommunityName = ''
this.dialogVisible = false
},
handleBeforeClose (done) {
this.dialogVisible = false
done()
},
handleEditCommunity () {
this.isEditCommunity = true
},
handleSaveCommunity () {
this.isEditCommunity = false
},
handleEditStreet () {
this.isEditStreet = true
},
handleSaveStreet () {
this.isEditStreet = false
},
enterSystem () {
this.$router.push('/dashboard')
}
}
}
bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
用vue实现点击编辑按钮将li变为可以输入文本的input
点击一下 < ...
ElementUI table 点击编辑按钮进行编辑实现示例
vue 点击一个div，使input获得焦点
输入留言
点击编辑table变为可编辑状态
简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...
Ubuntu 18.04中截图工具Shutter的编辑按钮不可用的解决办法
Shutter是一个由第三方提供的在Ubuntu上运行的截图工具,相对于系统自带的截图工具(默认可通过Ctrl + Shift + Print快捷键启动截图),最大的优点就是可以即时对图片进行编辑,在 ...
corethink功能模块探索开发(十四)后台编辑按钮
效果图: 1.添加下图55&58行代码 2.实现edit方法 位于Equip/Admin/DeviceRepaireAdmin.class.php中 public function edit( ...
vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换
通过我的测试我发现两个两种方法来编辑单元格的内容 第一种点击编辑: 我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除, 代 ...
asp.mvc中的vue分页实例，分页组件无法重置reload，解决点击查询按钮后，分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
随机推荐
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
atitit 短信接口规范与短信解决方案.docx
atitit 短信接口规范与短信解决方案.docx 1.1. 国内比较著名的短信提供商1 1.2. 短信接口规范1 1.3. 短信sdk构成1 1.4. 短信的实现1 1.5. SmsServiceY ...
Weex 环境搭建(win7)
安装 Node.js node.js需要4.0+ 百度云下载地址/s/1o84g6c6 官网下载地址/en/ 安装教程请看这 ...
循环执行n次的代码
varaudio=document.createElement("audio");varindex=0;audio.src="piano/3C ...
unity销毁层级物体及 NGUI 深度理解总结
/kf/11/258811.html 1.想找到层级面板中某个物体,并销毁,利用下面的代码: GameObject obj = GameObjec ...
NOIP欢乐模拟赛 T3 解题报告
3．小澳的葫芦 (calabash.cpp/c/pas) [题目描述] 小澳最喜欢的歌曲就是. 一日表演唱歌,他尽了洪荒之力,唱响心中圣歌. 随之,小澳进入了葫芦世界. 葫芦世界 ...
Android子线程更新UI主线程方法之Handler
背景: 我们开发应用程序的时候,处于线程安全的原因子线程通常是不能直接更新主线程(UI线程)中的UI元素的,那么在Android开发中有几种方法解决这个问题,其中方法之一就是利用Handler处理的. ...
bat 批处理 字符串 截取
由于项目中配置项太多,经常有同事在配置xml的时候,讲 配置的路径搞错,先需要搞一个脚本,可以自动将路径截取出来, 晚上收集了点资料,暂时先上几个 bat 后面留着 ,具体实现. @echo off ...
String和StringBuilder作为参数的区别
先见下面实例: public class TestDemo { @Test public void test(){ //String str = "hello"; String s ...
Github博客地址
欢迎访问我的Github博客:J.R.Smith_blog
