近段时间由于公司项目要求,前端开始使用VUE框架进行开发,最近刚开始学习,做了一个表单的增删改查,和大家分享一下。

页面模型代码设计如下

<template>
<div id="navi_108_page">
<i-button type="info" @click="adds">添加类型</i-button>
<i-button type="warning" @click="modify">修改类型</i-button>
<i-button type="error" @click="remv">删除类型</i-button>
<Table :columns="columns1" :data="msg" @on-select="tableSelect" @on-selection-change="onchange">
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</Table>
<Modal
v-model="modal1"
title="添加类型"
@on-ok="ok1"
@on-cancel="cancel1">
<Input v-model="value1" placeholder="请输入保密责任类型" style="width: 300px" />
</Modal>
<Modal
v-model="modal2"
title="修改类型"
@on-ok="ok2"
@on-cancel="cancel2">
<Input v-model="value2" style="width: 300px" />
</Modal>
</div>
</template>

事件方法如下:

<script>
import axios from 'axios'
export default {
components: {},
data() {
return {
modal1: false,
modal2: false,
value1:"",
value2:"",
columns1: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '编号',
width:100,
key: 'id'
},
{
title: '名称',
key: 'name'
}
],
//声明一个data,用来存储服务返回的数据值
msg: [],
se:[],
se2:[] }
},
methods: {
onchange(selection){
this.se=selection;
},
tableSelect(selection,row){
console.log(selection);
console.log(row);
this.se=selection;
this.se2=row;
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~`");
},
querytable(){
let _this = this;
axios.post(this.$store.state.globalUrl.server+"/BmProject/bmzrt/list2")//post也可以改成get,但需要对应服务端的请求方法
.then(function (response) {
//将返回的数据存入页面中声明的data中
console.log("获取数据成功");
console.log(response.data.data);
_this.msg = response.data.data;
})
.catch(function (error) {
alert(error);
});
},
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
adds(){
this.modal1=true;
},
modify(){
if(this.se.length==1){
this.modal2=true;
console.log(this.se[0].name);
this.value2=this.se[0].name;
}else{
this.$Message.info("请选择一条唯一数据!")
}
},
remv(){
console.log("------------------------");
let _this = this;
console.log(this.se);
console.log(this.se2);
let ids=[];
for(let a of this.se){
ids.push(a.id);
}
axios.post(this.$store.state.globalUrl.server+"/BmProject/bmzrt/Delete",{id:ids})//post也可以改成get,但需要对应服务端的请求方法
.then(function (response) {
//将返回的数据存入页面中声明的data中
console.log("获取数据成功");
_this.querytable();
})
.catch(function (error) {
alert(error);
});
},
ok1 () {
let a=this.value1;
let _this = this;
axios.post(this.$store.state.globalUrl.server+"/BmProject/bmzrt/AddType",{name:a})//post也可以改成get,但需要对应服务端的请求方法
.then(function (response) {
//将返回的数据存入页面中声明的data中
console.log("添加成功");
_this.querytable();
})
.catch(function (error) {
alert(error);
});
}, cancel1 () {
this.$Message.info('Clicked cancel');
},
ok2 () {
let _this = this;
axios.post(this.$store.state.globalUrl.server+"/BmProject/bmzrt/Update",{id:this.se[0].id,name:this.value2})//post也可以改成get,但需要对应服务端的请求方法
.then(function (response) {
//将返回的数据存入页面中声明的data中
console.log("修改成功");
_this.querytable();
})
.catch(function (error) {
alert(error);
});
},
cancel2 () {
this.$Message.info('Clicked cancel');
} }, mounted() {
//当页面加载的时候执行
this.querytable();
}
}
</script>

实现效果:

修改:

可以实现批量删除。

vue.js带复选框表单的增删改查的更多相关文章

  1. django-orm框架表单的增删改查

    08.14自我总结 django-orm框架 一.orm基本配置 1.创建django项目 命令行:cmd先去到django创建目录,然后输入django-admin startproject dja ...

  2. AppBox实战: 如何实现一对多表单的增删改查

      本篇通过完整示例介绍如何实现一对多关系表单的相应服务及视图. 一.准备数据结构   示例所采用的数据结构为"物资需求"一对多"物资清单",通过IDE的实体设 ...

  3. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  4. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  6. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  7. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  8. js操作复选框 复选框

    //复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...

  9. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. Laravel ---【转】PhpStorm下Laravel代码智能提示

    [转]http://blog.csdn.net/pangchengyong0724/article/details/54706775 第一步:在项目的composer.json中添加如下一行 &quo ...

  2. 02 我的第一个Javascript代码

    02-第一个JavaScript代码   在页面中,我们可以在body标签中放入<script type=”text/javascript”></script>标签对儿,< ...

  3. Hadoop编程踩坑

    Hadoop踩坑 在hadoop所有组件编程中,遇到在Windows下运行程序出现 java.io.IOException: Could not locate executable null\bin\ ...

  4. 基于Common.Logging + Log4Net实现的日志管理

    前言 Common.Logging 是Commons-Logging(apache最早提供的日志门面接口,提供了简单的日志实现以及日志解耦功能) 项目的.net版本.其目的是为 "所有的.n ...

  5. Scala 学习之路(十一)—— 模式匹配

    一.模式匹配 Scala支持模式匹配机制,可以代替swith语句.执行类型检查.以及支持析构表达式等. 1.1 更好的swith Scala不支持swith,可以使用模式匹配match...case语 ...

  6. Excel导出打印失败报错 (eg HSSF instead of XSSF)

    错误信息: java.lang.RuntimeException: org.apache.poi.openxml4j.exceptions.OLE2NotOfficeXmlFileException: ...

  7. 不懂数据库索引的底层原理?那是因为你心里没点b树

    本文在个人技术博客不同步发布,详情可用力戳 亦可扫描屏幕右侧二维码关注个人公众号,公众号内有个人联系方式,等你来撩...   前几天下班回到家后正在处理一个白天没解决的bug,厕所突然传来对象的声音: ...

  8. JAVA String类型的一些小操作

    String类型是否包含某个String类型的函数:源字符串.contains(包含字符串)  返回值为:boolean类型(true或false) String类型把某个字符替换成另一个字符:源字符 ...

  9. 在eclipse中使用git创建本地库,以及托管项目到GitHub超详细教程

    关于安装git的教程,由于比较简单,并且网上教程特别多,而且即使不按照网上教程,下载好的windows版本git,安装时候一路默认设置就行. 安装好之后,在桌面上有git图标:右键菜单中有Git Ba ...

  10. 【POJ - 2676】Sudoku(数独 dfs+回溯)

    -->Sudoku 直接中文 Descriptions: Sudoku对数独非常感兴趣,今天他在书上看到了几道数独题: 给定一个由3*3的方块分割而成的9*9的表格(如图),其中一些表格填有1- ...