思路:
一.添加一行數(shù)據(jù)
就是在添加的時候新建一個key值和表行key值一抹一樣的對象
let j = {
"type": "",
"addport": "",
"user": "",
"pwd": "",
"info": "",
"isSet": true,
};
二.編輯一行的數(shù)據(jù)
就是根據(jù)isSet的存在與否來判斷這一行是input顯示(可編輯狀態(tài))還是span顯示(不可編輯狀態(tài))
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="請輸入內(nèi)容" v-model="master_user.sel[item.prop]">
</el-input>
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
三.刪除一行
就是拿到這一行的索引值,然后用數(shù)組的splice()刪除就好
deleteRow(index, rows) { //刪除
rows.splice(index, 1)
}
全部代碼 ps:這里的代碼是需要在vue-cli腳手架上面來運行的啊,相信小伙伴在做這個功能的時候,應(yīng)該已經(jīng)會用vue-cli了吧,對了,style后面是用的sass 如果不會sass,又想運行我的代碼,建議刪掉style.
<template>
<div id="app">
<el-row>
<el-col :span="24">
<el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
<el-table-column type="index"></el-table-column>
<el-table-column v-for="(item,index) in master_user.columns" :label="item.label" :prop="item.prop" :width="item.width">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="請輸入內(nèi)容" v-model="master_user.sel[item.prop]">
</el-input>
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="">
<template slot-scope="scope">
<span class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click.stop="saveRow(scope.row,scope.$index)">
確定
</span>
<span class="el-tag el-tag--primary el-tag--mini" style="cursor: pointer;" @click="editRow(scope.row,scope.$index)">
編輯
</span>
<span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="deleteRow(scope.$index,master_user.data)">
刪除
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24">
<div class="el-table-add-row" style="width: 99.2%;" @click="add()"><span>+ 添加</span></div>
</el-col>
</el-row>
<span>{{master_user.data}}</span>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
master_user: {
sel: null, //選中行
columns: [{
prop: "type",
label: "遠(yuǎn)程類型",
width: 120
},
{
prop: "addport",
label: "連接地址",
width: 150
},
{
prop: "user",
label: "登錄用戶",
width: 120
},
{
prop: "pwd",
label: "登錄密碼",
width: 220
},
{
prop: "info",
label: "其他信息"
}
],
data: [],
},
}
},
methods: {
add() {
for (let i of this.master_user.data) {
if (i.isSet) return this.$message.warning("請先保存當(dāng)前編輯項");
}
let j = {
"type": "",
"addport": "",
"user": "",
"pwd": "",
"info": "",
"isSet": true,
};
this.master_user.data.push(j);
this.master_user.sel = JSON.parse(JSON.stringify(j));
},
saveRow(row, index) { //保存
let data = JSON.parse(JSON.stringify(this.master_user.sel));
for (let k in data) {
row[k] = data[k] //將sel里面的value賦值給這一行。ps(for....in..)的妙用,細(xì)心的同學(xué)發(fā)現(xiàn)這里我并沒有循環(huán)對象row
}
row.isSet = false;
},
editRow(row) { //編輯
for (let i of this.master_user.data) {
if (i.isSet) return this.$message.warning("請先保存當(dāng)前編輯11項");
}
this.master_user.sel = row
row.isSet = true
},
deleteRow(index, rows) { //刪除
rows.splice(index, 1)
}
},
components: {}
}
</script>
<style lang="scss">
.el-table-add-row {
margin-top: 10px;
width: 100%;
height: 34px;
border: 1px dashed #c1c1cd;
border-radius: 3px;
cursor: pointer;
justify-content: center;
display: flex;
line-height: 34px;
}
</style>