vue表單中遍歷表單操作按鈕的顯示隱藏示例
更新時間:2019年10月30日 11:09:06 作者:xie123aaa
今天小編就為大家分享一篇vue表單中遍歷表單操作按鈕的顯示隱藏示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
使用情況,vue中返回的數(shù)據(jù)循環(huán)遍歷如果用到v-if時不能直接賦值true 或者false,要true 或者false push到數(shù)組里面,隱藏或顯示時用 splice方法。
以下是詳情
1. 第一步先在data中定義數(shù)組
data () {
return {
passSaveShow: [], // 通行組保存和取消的顯示隱藏
passEditShow: [], // 通行組編輯的顯示隱藏
checkedUnLink: [], // 取消關聯(lián)是否選中
valDate: [], // 有效期顯示
pickDateShow: [], // 日期插件隱藏
linkedValue: [],
showImg: false, // 是否放大圖片
imgSrc: '', // 圖片的路徑
checkName: '', // 輸入姓名關鍵字
checked: false,
checkLists: [],
checkPage: {
page: 1,
count: 2,
total: 0
}
};
}
2.頁面中使用
<td> <i v-if="passEditShow[index]" @click="editValDate(index)" title="編輯" class="el-icon-edit-outline"></i> <div class="passSave" v-if="passSaveShow[index]"> <i @click="passSaveDate(index)" title="保存提交" class="el-icon-circle-check"></i> <i @click="passCancel(index)" title="取消" class="el-icon-circle-close"></i> </div> </td>
3.重要的一步,push到數(shù)組中
// 初始化加載數(shù)據(jù)
mounted () {
let groupId = this.$props.perGroupInfo.id;
let page = 1;
let count = this.checkPage.count;
let expired = 0;
console.log(groupId);
let url = `api/groupemp/linked?page=${page}&count=${count}&groupId=${groupId}&expired=${expired}`;
this.$https.get(url).then(res => {
console.log('查看初始化數(shù)據(jù)');
console.log(res);
console.log(res.data.data);
console.log('查看初始化數(shù)據(jù)尾');
this.checkLists = res.data.data;
this.checkPage.total = res.data.Total;
this.checkLists.forEach((item, index) => {
this.valDate.push(true);
this.pickDateShow.push(false);
this.passSaveShow.push(false);
this.passEditShow.push(true);
});
}).catch(err => {
console.log('查看初始化數(shù)據(jù)報錯');
console.log(err);
});
},
4.更改按鈕的顯示隱藏,使用splice ,不能直接更改
// 修改有效期
editValDate (val) {
this.passEditShow.splice(val, 1, false);
this.passSaveShow.splice(val, 1, true);
this.valDate.splice(val, 1, false);
this.pickDateShow.splice(val, 1, true);
// console.log(this.valDate[val]);
// console.log(this.pickDateShow[val]);
},
以上這篇vue表單中遍歷表單操作按鈕的顯示隱藏示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-05-05
Vue2中使用自定義指令實現(xiàn)el-table虛擬列表的代碼示例
在實際開發(fā)中,我們可能會面臨其他需求,例如在 el-table 中無法使用分頁技術的情況下展示海量數(shù)據(jù),這種情況下,頁面可能會出現(xiàn)卡頓,嚴重時甚至可能引發(fā)瀏覽器崩潰,所以針對這個問題本文給大家介紹了vue2中使用自定義指令實現(xiàn)el-table虛擬列表,需要的朋友可以參考下2025-01-01

