现在公司项目是做的后台管理系统，那么无疑要用到增、删、改、查。其实实战里的增删改查都要调用接口，传递参数，而很多的dom操作都反而不需要了。
vue有个很关键的词对增删改查很重要，叫做双向数据绑定。因为你需要不断的传参，传值，接收id，原生DOM的操作能不用就不用，耗性能，还麻烦。以下是个人学习记录，大佬批评指正。
第一：首先来说一说 增，话不多说，上代码。下面为增、删、改页面效果
下面代码是html部分，是一个添加功能，就不上效果图了，v-model绑定的数据为input.xxx
<!--提示框-->
<el-button class="btnAdd" type="primary" @click="dialogVisible = true">新增自提点</el-button>
<el-dialog title="新增自提点：" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
<el-form label-width="90px" :label-position="labelPosition">
<el-form-item label="自提点名称">
<el-input v-model="input.name"></el-input>
</el-form-item>
<el-form-item label="自提点地址">
<el-input v-model="input.address"></el-input>
</el-form-item>
<el-form-item label="自提点电话">
<el-input v-model="input.phone"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false;branchAdd()">确 定</el-button>
</span>
</el-dialog>
export default {
data () {
return {
input:{
id:'',
name:'',
address:'',
phone:''
}
}
},
methods: {
//新增自提点
branchAdd(){
this.$api.branch.add(data => { //这里为点击按钮调用的接口
window.location.reload(); //调用成功刷新页面更新数据
},{
name:this.input.name, //传递绑定的参数，注意this指向
address:this.input.address,
phone:this.input.phone,
});
},
}
}
第二：删，这是一个表格，最后为删除，点击删除要根据对应行的id删除此行。点击事件remove(props.row.id)，括号中要传入对应的id值，对应列，所以是props.row.id
<el-table :data="trData" v-loading="loading" stripe style="width: 100%">
<el-table-column prop="id" label="自提点编号" width="100"></el-table-column>
<el-table-column prop="name" label="自提点名称" ></el-table-column>
<el-table-column prop="address" label="自提点地址" ></el-table-column>
<el-table-column prop="phone" label="自提点电话" ></el-table-column>
<el-table-column label="创建时间" >
<template slot-scope="props">
{{props.row.createTime | moment('YYYY-MM-DD')}}
</template>
</el-table-column>
<el-table-column label="最后修改时间">
<template slot-scope="props">
{{props.row.updateTime | moment('YYYY-MM-DD')}}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="props">
<el-button type="primary" @click="changeBranch = true;selectid(props.row.id)" size="mini">修改</el-button>
<el-button @click="remove(props.row.id)" title="删除" type="danger" size="mini" :disabled="props.row.type == -1">删除</el-button>
</template>
</el-table-column>
</el-table> methods: {
//删除
remove(id){ //括号内要接收上面props.row.id传来的id值
this.$api.branch.remove(data => {
window.location.reload();
},{
id:id, //传递对应id给后端，
});
},
}
}第三：改，修改部分，同样是要获取当前行的id值，点击事件中通过props.row.id（这要根据项目实际情况），这里还有个小问题，就是vue中的点击事件可以用；进行分隔，@click="remove(props.row.id);a();b()"，这里可以一直串联，调用接口不用加（）
<el-table-column label="操作">
<template slot-scope="props">
<el-button type="primary" @click="changeBranch = true;selectid(props.row.id)" size="mini">修改</el-button>
<el-button @click="remove(props.row.id)" title="删除" type="danger" size="mini" :disabled="props.row.type == -1">删除</el-button>
</template>
</el-table-column>
<el-dialog title="修改自提点信息：" :visible.sync="changeBranch" width="35%" :before-close="handleClose">
<el-form label-width="90px" :label-position="labelPosition">
<el-form-item label="自提点编号">
<el-input v-model="form.id" class="inputId" disabled></el-input>
</el-form-item>
<el-form-item label="自提点名称">
<el-input v-model="form.name" class="inputName" ></el-input>
</el-form-item>
<el-form-item label="自提点地址" class="inputAddress">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="自提点电话" class="inputPhone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="changeBranch = false">取 消</el-button>
<el-button type="primary" @click="changeBranch = false;branchchange()">确 定</el-button>
</span>
</el-dialog>data () {
return {
input:{
id:'',
name:'',
address:'',
phone:''
},
form:{ //修改页面input里的数据，在这里存储一下
id:'',
name:'',
address:'',
phone:''
},
}
},
methods: {
//修改
//获取id
selectid(id){ //形参接收id
this.$api.branch.selectid(data => {
this.form.id = data.id //因为需求
this.form.name = data.name //要根据id获取当前行的数据，并且渲染到提示框的input中
this.form.address = data.address //这里同样是通过双向数据绑定，进行传递数据
this.form.phone = data.phone
//window.location.reload();
},{
id:id //传递对应行的id
});
},
}第四：查，下面为搜索功能，效果图如下：其中需要注意参数的转型
<el-row :gutter="20" style="margin: 15px 0 0 15px;">
<el-col :span="3">
<el-input v-model="search.orderId" placeholder="订单编号" offset="3"></el-input>
</el-col>
<el-col :span="3">
<el-input v-model="search.userId" placeholder="用户编号"></el-input>
</el-col>
<el-col :span="3">
<el-input v-model="search.userName" placeholder="用户名称"></el-input>
</el-col>
<el-col :span="3">
<div class="block">
<el-date-picker v-model="search.createTime" type="date" placeholder="创建时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</div>
</el-col>
<el-button type="primary" style="margin-left:40px;" @click="_orderList" >搜索</el-button>
</el-row>methods: {
_orderList(){ //此接口与列表接口相同
this.loading = true;
this.$api.order.list(data => {
this.orderList = data;
this.loading = false;
},
{
orderId:this.search.orderId, //传递对应参数给后台
userId:parseInt(this.search.userId), //部分参数要注意转类型
userName:this.search.userName,
createTime:this.search.createTime,
}
);
},
}以上就是我所接触的增、删、改、查，希望各位大佬批评指正。