<div class="table-box">
<el-table :data="tableData" border style="width: 100%">
<el-table-column
label="编号"
width="80">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.id"></el-input>
<span v-show="!scope.row.show">{
{scope.row.id}}</span>
</template>
</el-table-column>
<el-table-column
label="机组名称"
width="110">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.name"></el-input>
<span v-show="!scope.row.show">{
{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
label="机组类型"
width="110">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.type"></el-input>
<span v-show="!scope.row.show">{
{scope.row.type}}</span>
</template>
</el-table-column>
<el-table-column
label="所属电厂"
width="110">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.station"></el-input>
<span v-show="!scope.row.show">{
{scope.row.station}}</span>
</template>
</el-table-column>
<el-table-column
label="所属发电集团"
width="150">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.type"></el-input>
<span v-show="!scope.row.show">{
{scope.row.type}}</span>
</template>
</el-table-column>
<el-table-column
label="装机容量"
width="110">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.capacity"></el-input>
<span v-show="!scope.row.show">{
{scope.row.capacity}}</span>
</template>
</el-table-column>
<el-table-column
label="是否供暖区域"
width="150">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.area"></el-input>
<span v-show="!scope.row.show">{
{scope.row.area}}</span>
</template>
</el-table-column>
<el-table-column
label="机组是否供暖"
width="150">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.Heater"></el-input>
<span v-show="!scope.row.show">{
{scope.row.Heater}}</span>
</template>
</el-table-column>
<el-table-column
label="供暖开始时间"
width="150">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.start_time"></el-input>
<span v-show="!scope.row.show">{
{scope.row.start_time}}</span>
</template>
</el-table-column>
<el-table-column
label="供暖结束时间"
width="150">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.end_time"></el-input>
<span v-show="!scope.row.show">{
{scope.row.end_time}}</span>
</template>
</el-table-column>
<el-table-column
label="机组启动费用(元/次)"
width="210">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.start_cost"></el-input>
<span v-show="!scope.row.show">{
{scope.row.start_cost}}</span>
</template>
</el-table-column>
<el-table-column
label="空载费用(元/h)"
width="160">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.unload_cost"></el-input>
<span v-show="!scope.row.show">{
{scope.row.unload_cost}}</span>
</template>
</el-table-column>
<el-table-column
label="电能量费用(元/MWh)"
width="220">
<template slot-scope="scope">
<el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.elc_cost"></el-input>
<span v-show="!scope.row.show">{
{scope.row.elc_cost}}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="260">
<template slot-scope="scope">
<button
class="apply-btn mini gray-link"
@click="scope.row.show =true"
>修改</button>
<button
class="apply-btn mini"
@click="scope.row.show =false"
>保存</button>
<button class="apply-btn mini red" @click="handleDelete(scope.$index, scope.row)">删除</button>
</template>
</el-table-column>
</el-table>
</div>
tableData:[
{
id: 1,
name: "#1机组",
type: "XX机组",
station: "XX电厂",
group: "XX集团",
capacity: "XXX",
area: "是",
Heater: "是",
start_time: "2019-11-15",
end_time: "2020-3-15",
start_cost: "XXX",
unload_cost: "XXX",
elc_cost: "XXX",
show: false,
},
{
id: 2,
name: "#2机组",
type: "XX机组",
station: "XX电厂",
group: "XX集团",
capacity: "XXX",
area: "是",
Heater: "否",
start_time: "",
end_time: "",
start_cost: "XXX",
unload_cost: "XXX",
elc_cost: "XXX",
show: false,
},
],
handleDelete(i,item) {
this.$confirm("确定删除这条数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$message({
type: "success",
message: "删除成功!",
});
console.log(item);
this.tableData=this.tableData.filter(o => o.id !=item.id);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},