資訊專欄INFORMATION COLUMN
摘要：代碼部分全選操作編輯刪除姓名年齡性別愛(ài)好保存新增部分姓名年齡性別愛(ài)好小花小軍小坤小新您確定要保存修改嗎感興趣的，可以給顆小心心或者一個(gè)大拇指
代碼：
HTML部分
全選
{{item.title}}
操作
{{index+1}}
{{col[item.filed]}}
js部分
new Vue({
el:"#app",
data() {
return {
allcheck: false,
search: "",
checkItem:[],
columns: [
{
title: "姓名",
filed: "name"
}, {
title: "年齡",
filed: "age"
}, {
title: "性別",
filed: "gender"
}, {
title: "愛(ài)好",
filed: "hobby"
}
],
form:{
id: "",
name: "",
age: "",
gender: "",
hobby: ""
},
datas: [
{
id: "1",
name: "小花",
age: "15",
gender: "woman",
hobby: "coding"
}, {
id: "2",
name: "小軍",
age: "18",
gender: "man",
hobby: "sleeping"
}, {
id: "3",
name: "小坤",
age: "8",
gender: "man",
hobby: "shopping"
}, {
id: "4",
name: "小新",
age: "28",
gender: "woman",
hobby: "singing"
}
]
}
},
watch:{
checkItem: {
handler(val) {
const hasfalse = this.checkItem.includes(false);
if(hasfalse) {
this.allcheck = false;
}else{
this.allcheck = true;
}
},
deep: true
},
datas: {
handler(val) {
return val
},
deep: true
}
},
methods: {
edit(param) {
const form = this.datas[param];
this.form = Object.assign({},this.form,form);
},
deleted(param) {
this.checkItem.splice(param,1);
this.datas.splice(param,1);
},
save() {
let result = window.confirm("您確定要保存修改嗎？");
if(result) {
let id = this.form.id;
let index = this.datas.findIndex(item => {return item.id == id});
const newitem = Object.assign({},this.form);
this.datas.splice(index,1,newitem);
}else {
return
}
},
checkAll() {
if(this.allcheck) {
this.checkItem = this.datas.map(item => {
return true;
})
}else{
this.checkItem = this.datas.map(item => {
return false;
})
}
},
sort(param) {
this.datas.sort(function (obj1, obj2) {
if (obj1[param] > obj2[param]) {
return 1;
} else if (obj1[param] === obj2[param]) {
return 0;
} else {
return -1;
}
}
)
},
add() {
let ids = this.datas.map( item => {
return item.id;
})
let idmax = Math.max(ids);
this.form.id = ++idmax;
this.allcheck = false;
this.datas.push(this.form);
this.checkItem.push(false);
}
},
created() {
this.$nextTick(() => {
this.checkItem = this.datas.map( item => {
return false;
})
})
}
});
感興趣的，可以給顆小心心或者一個(gè)大拇指~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113534.html
摘要：是一個(gè)基于的快速開(kāi)發(fā)插件，支持?jǐn)?shù)據(jù)表格增刪改查操作，提供通用的組件，通過(guò)配置實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，減少前端重復(fù)開(kāi)發(fā)的工作。 fsLayui 是一個(gè)基于layui的快速開(kāi)發(fā)插件，支持?jǐn)?shù)據(jù)表格增刪改查操作，提供通用的組件，通過(guò)配置html實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，減少前端js重復(fù)開(kāi)發(fā)的工作。 GitHub下載 碼云下載 測(cè)試環(huán)境地址：http://fslayui.itcto.cn 為什么要使用fsLa...
摘要：最近在做畢設(shè)，同學(xué)在做前端頁(yè)面的時(shí)候使用到和這些控件，然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)的實(shí)現(xiàn)，于是就自己去官網(wǎng)文檔上學(xué)習(xí)了一下，嘗試實(shí)現(xiàn)這個(gè)官方文檔代碼代碼效果如下圖示頂部結(jié)構(gòu)頁(yè)面上的三個(gè)，增刪改新增修改刪除這里的框的 最近在做畢設(shè)，同學(xué)在做前端頁(yè)面的時(shí)候使用到JQuery、DataTable和Bootstrap這些控件，然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)demo的實(shí)現(xiàn)，于是就自己去...
摘要：表示需要攔截的請(qǐng)求類型。表示數(shù)據(jù)模板，可以是對(duì)象或字符串。表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。指向本次請(qǐng)求的選項(xiàng)集。生成規(guī)則是可選的。返回成功的數(shù)據(jù)，就是登錄成功了，否則相反。模擬登錄接下來(lái)介紹模擬表格增刪改查。 前言 關(guān)于mockjs，官網(wǎng)描述的是 1.前后端分離 2.不需要修改既有代碼，就可以攔截 Ajax 請(qǐng)求，返回模擬的響應(yīng)數(shù)據(jù)。 3.數(shù)據(jù)類型豐富 4.通過(guò)隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景。 5...
摘要：注釋在中可以使用空格描述來(lái)表示注釋說(shuō)明即增加查詢更新刪除四個(gè)單詞的首字母縮寫(xiě)。 1.CRUD 注釋：在SQL中可以使用–空格+描述來(lái)表示注釋說(shuō)明CRUD 即增加...
摘要：聲明構(gòu)造函數(shù)，作用是把從數(shù)據(jù)庫(kù)取出的數(shù)據(jù)實(shí)例化為對(duì)象。該構(gòu)造函數(shù)傳入的值為從中取出的數(shù)據(jù)省略接口提供增刪改查接口實(shí)現(xiàn)提供增刪改查接口實(shí)現(xiàn)提供了一個(gè)類似于的設(shè)計(jì)的類。 本文快速入門(mén),MongoDB 結(jié)合SpringBoot starter-data-mongodb 進(jìn)行增刪改查 1、什么是MongoDB ? MongoDB 是由C++語(yǔ)言編寫(xiě)的，是一個(gè)基于分布式文件存儲(chǔ)的開(kāi)源數(shù)據(jù)庫(kù)系統(tǒng)。...
閱讀 2318·2021-10-09 09:41
閱讀 3498·2021-09-13 10:34
閱讀 1991·2019-08-30 12:59
閱讀 616·2019-08-29 17:27
閱讀 1124·2019-08-29 16:07
閱讀 3025·2019-08-29 13:15
閱讀 1378·2019-08-29 13:14
閱讀 1632·2019-08-26 12:18
