vue的table，直接在table上添加行，編輯行。
特別提醒
在網(wǎng)上有些案例中，有些bug，比如，點擊編輯之后，雖然屬性都設(shè)置進去了，但是編輯框不出來，根據(jù)經(jīng)驗，摸索出來的解決方案是對主鍵進行重新設(shè)置，比如這里的id重新設(shè)置還原之后，即可解決bug。
row.id=row.id+" ";
row.id=row.id.trim();
1、代碼
通過在行上添加一個變量來控制是新增，還是編輯，或者是顯示。
下面這一段js代碼，定義了幾個屬性
1、start，通過設(shè)置start來處理判斷
start == 0是新建，start==1是編輯，start=undefined是顯示。
2、hasUnSaveItem來判斷是否有未保存的編輯項。
3、hasUnSaveItemIndex來判斷未保存的編輯項的索引號
//start == 0的時候，新建，start==1的時候編輯
isAddDisplay(row) {
return row.start != undefined && row.start == 0;
},
isEditDisplay(row) {
return row.start != undefined && row.start == 1;
},
isAddOrEditDisplay(row) {
return row.start != undefined && (row.start == 0 || row.start == 1);
},
setAdd(row, index) {
row.start = 0;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
setEdit(row, index) {
row.start = 1;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
quitEdit(row, index){
row.start = undefined;
this.hasUnSaveItem = '';
this.hasUnSaveItemIndex = '';
},
下面是整個頁面的完整代碼
<template>
<div class="app-container">
<div class="module-title"> 管理頁面 </div>
<el-row class="mt20 mb10">
<el-col :span="24" class="toolbar">
<el-button type="primary" @click="handleAdd">添加</el-button>
</el-col>
</el-row>
<el-table class="tablelist" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
<el-table-column width="50" header-align="center">
<template slot-scope="{row,$index}">
<span>{{$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="名稱" prop="name" min-width="120px">
<template slot-scope="scope">
<el-input v-model="vo.name" v-if="isAddOrEditDisplay(scope.row)" style="width:90%;"></el-input>
<span v-else>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="166px" class-name="small-padding fixed-width">
<template slot-scope="{row,$index}">
<el-button type="primary" plain
@click="isAddOrEditDisplay(row)?handleSave(row):handleUpdate(row, $index)"
>{{isAddOrEditDisplay(row)?"保存":"修改"}}</el-button>
<el-button type="danger" plain
@click="isAddOrEditDisplay(row)?handleCancel(row, $index):handleDelete(row)"
>{{isAddOrEditDisplay(row)?"取消":"刪除"}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- -->
</div>
</template>
<script>
export default {
name: "GroupUserR",
data() {
return {
// 遮罩層
loading: true,
tempList:[{name:'',start:0}],
list2:[],
hasUnSaveItem:'',//如果有編輯的項未保存，就提示有未保存的項。
hasUnSaveItemIndex:'',//未保存的序號。
vo: {
name:"",
},
// 查詢參數(shù)
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 表單參數(shù)
form: {},
// 表單校驗
rules: {
}
};
},
created() {
// this.getList();
this.loading = false;
},
activated() {
const time = this.$route.query.t;
if (time != null && time != this.uniqueId) {
this.uniqueId = time;
this.resetQuery();
this.getList();
}
},
methods: {
//start == 0的時候，新建，start==1的時候編輯
isAddDisplay(row) {
return row.start != undefined && row.start == 0;
},
isEditDisplay(row) {
return row.start != undefined && row.start == 1;
},
isAddOrEditDisplay(row) {
return row.start != undefined && (row.start == 0 || row.start == 1);
},
setAdd(row, index) {
row.start = 0;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
setEdit(row, index) {
row.start = 1;
this.hasUnSaveItem = true;
this.hasUnSaveItemIndex = index;
},
quitEdit(row, index){
row.start = undefined;
this.hasUnSaveItem = '';
this.hasUnSaveItemIndex = '';
},
resetTempList() {
this.tempList=[{name:'',start:0}];
},
resetVo() {
this.vo = {
name:""
};
},
getList() {
this.loading = true;
let _this = this;
getRolePermissions(this.queryParams).then(response => {
if(response.code == 200 && response.data.length > 0) {
_this.list2 = response.data;
});
_this.list = [].concat(_this.list2);
}
this.loading = false;
}).catch(e=>{
this.loading = false;
});
},
/** 新增按鈕操作 */
handleAdd() {
if(this.hasUnSaveItem) {
this.msgInfo("有編輯項未保存，請保存后操作。");
return;
}
this.resetVo();
this.resetTempList();
this.list = this.tempList.concat(this.list2);
this.setAdd(this.list[0], 0);
},
/** 保存 */
handleSave(row) {
let _this = this;
let pars = {
id: row.id,
name: _this.vo.name
};
if (!row.id && row.id != undefined) {
updateRolePermission(pars).then(response => {
this.msgSuccess("修改成功");
this.getList();
}).catch(e=>{
this.resetVo();
this.handleDelete(row);
});
} else {
addRolePermission(pars).then(response => {
this.msgSuccess("添加成功");
this.getList();
}).catch(e=>{
this.resetVo();
this.handleDelete(row);
});
}
},
/** 修改按鈕操作 */
handleUpdate(row, index) {
if(this.hasUnSaveItem && this.hasUnSaveItemIndex != index) {
this.msgInfo("有編輯項未保存，請保存后操作。");
return;
}
this.setEdit(row, index);
let _this = this;
row.id=row.id+" ";
row.id=row.id.trim();
_this.vo.name = row.name;
},
/** 取消按鈕操作 */
handleCancel(row, index) {
this.quitEdit(row, index);
if(row.id) {
row.id=row.id+" ";
row.id=row.id.trim();
} else {
this.list.splice(index, 1);
}
return;
},
/** 刪除按鈕操作 */
handleDelete(row) {
const ids = row.id || this.ids;
if(ids.length == 0) {
this.list = this.list.slice(1);
return;
}
this.$confirm('是否確認(rèn)刪除編號為"' + ids + '"的數(shù)據(jù)項?', "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delete(ids);
}).then(() => {
this.getList();
this.msgSuccess("刪除成功");
}).catch(function() {});
},
}
};
</script>
2、效果展示
1、點擊添加
image.png
2、填寫之后，保存
image.png
3、點擊修改
image.png
3.1、填寫內(nèi)容之后，保存
image.png
3.2、點擊修改之后，取消
image.png
如果點擊修改之后，不保存也不取消，點擊添加，根據(jù)hasUnSaveItem判斷提示
image.png
4、新增，直接取消
image.png
因為是沒有id的行，所以直接刪除。
image.png
