实现el-table的可编辑表格如图所示:
以下展示部分代码:
<el-table-column label="价格" min-width="20" align="center">
<template slot-scope="scope">
<el-input
v-if="scope.row.edit"
v-model="scope.row.price"
placeholder="价格"
></el-input>
<span v-else>{{ scope.row.price }}</span>
</template>
</el-table-column>
<el-table-column label="库存" min-width="20" align="center">
<template slot-scope="scope">
<el-input
v-if="scope.row.edit"
v-model="scope.row.store"
placeholder="库存"
></el-input>
<span v-else>{{ scope.row.store }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="230"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
@click="confirmData(scope.row)"
v-if="scope.row.edit"
type="success"
size="medium"
>
<i class="el-icon-check" aria-hidden="true"></i>
</el-button>
<div v-else>
<el-button
type="primary"
size="medium"
@click="editData(scope.row)"
>
<i class="el-icon-edit" aria-hidden="true"></i>
</el-button>
<el-button
type="danger"
size="medium"
@click="handleDelete(scope)"
>
<i class="el-icon-delete" aria-hidden="true"></i>
</el-button>
</div>
</template>
</el-table-column>
methods:
editData(row) {
row.edit = true;
// console.log(row.edit);
// console.log(row.price);
},
confirmData(row) {
row.edit = false;
// console.log(row.edit);
// console.log(row.price);
this.$notify({
title: "Success",
message: "编辑成功",
type: "success",
duration: 2000,
});
handleDelete(row, index) {
this.$notify({
title: "Success",
message: "Delete Successfully",
type: "success",
duration: 2000,
});
this.list.splice(index, 1);
},
注意:这样写了以后发现点击按钮改变edit值时,不能立刻反应在view中,而且每行会影响,于是动态给所有数组记录 添加edit属性。
在getList方法中实现给数组加edit属性。
let data = JSON.parse(JSON.stringify(this.list ? this.list : []));
data.forEach((element) => {
element["edit"] = false;
});
this.list = data;