1 ！ 2！ 3！ pong~~~
先看笑果
el-table.gif
不多bibi， 上代码
<el-table
style="width: 100%"
border
:data="copyData"
stripe
@cell-dblclick="dblhandleCurrentChange"
@cell-click="currentChange"
:highlight-current-row="true"
>
<el-table-column
v-for="(item,index) in tableHead"
:prop="item.column_name"
:label="item.column_comment"
:key="index"
>
<template slot-scope="scope">
<!-- <span>{{ scope.row.isEdit }}</span> -->
<span v-if="scope.row.isEdit && currentTableId === scope.row.index">
<el-input v-model="scope.row[item.column_name]" size="mini" placeholder="请输入内容"></el-input>
</span>
<span v-else>{{ scope.row[item.column_name] }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button // 编辑 和 确认
:type="scope.row.isEdit && currentTableId === scope.row.index ? 'success' :'primary'"
:icon="scope.row.isEdit && currentTableId === scope.row.index ? 'el-icon-check' :'el-icon-edit'"
circle
@click="(e) => (handleEdit(scope.$index, scope.row,scope.row.isEdit,e))"
></el-button>
<el-button // 取消编辑
v-show="scope.row.isEdit && currentTableId === scope.row.index"
type="danger"
icon="el-icon-close"
circle
@click="(e) => cacle(scope.$index, scope.row,scope.row.isEdit,e)"
></el-button>
<el-button // 删除
v-if="operation === 1 "
v-show="!scope.row.isEdit || currentTableId != scope.row.index"
icon="el-icon-delete"
circle
type="danger"
@click="(e) => handleDelete(scope.$index, scope.row,scope.row.isEdit,e)"
></el-button>
</template>
</el-table-column>
</el-table>
然后再看一哈数据合适
tableHead: [
{
column_name: "stage_name",
column_comment: "阶段名称"
},
{
column_name: "staring_height",
column_comment: "持续时间(min)"
},
{
column_name: "end_height",
column_comment: "开始温度(°C)"
},
{
column_name: "duration",
column_comment: "结束温度(°C)"
}
],
tableData: [
{
stage_name: "新任务1",
staring_height: "1 ",
end_height: "1",
isEdit: false,
duration: "1",
index:0
},
]
欢迎指教，感谢打扰 bye ! ! ! !
有问题邮箱聊 2838370086@qq.com
