vue專案實戰中的增、刪、改、查
阿新 • • 發佈：2019-02-17
現在公司專案是做的後臺管理系統，那麼無疑要用到增、刪、改、查。其實實戰裡的增刪改查都要呼叫介面，傳遞引數，而很多的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,
}
);
},
}以上就是我所接觸的增、刪、改、查，希望各位大佬批評指正。