其实利用插槽可以解决 点击编辑的时候 elementui组件中的 table里单元格可以输入 并且获取一行的数据
<el-table
:header-cell-style="{
'text-align': 'center',
background: '#FAFAFA',
'font-weight': '400',
}"
:cell-style="{
'text-align': 'center',
'margin-bottom': '0',
}"
:data="tableDatas"
border
style="margin-top: 10px"
>
<el-table-column label="物料合计(元)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<span>{{ scope.row.material }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="工序合计(元)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<span>{{ scope.row.process }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="其他合计(元)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<span>{{ scope.row.other }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="测试标准(元)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<el-input
v-if="scope.row.isOK"
v-model="scope.row.test"
style="width: 50%; hight: 100%; margin: auto"
></el-input>
<span v-else>{{ scope.row.test }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="安全技术要求(元)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<el-input
v-if="scope.row.isOK"
v-model="scope.row.safe"
style="width: 50%; hight: 100%; margin: auto"
></el-input>
<span v-else>{{ scope.row.safe }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="利润(%)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<el-input
v-if="scope.row.isOK"
v-model="scope.row.profit"
style="width: 50%; hight: 100%; margin: auto"
></el-input>
<span v-else>{{ scope.row.profit }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="增值税(%)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<el-input
v-if="scope.row.isOK"
v-model="scope.row.added"
style="width: 50%; hight: 100%; margin: auto"
></el-input>
<span v-else>{{ scope.row.added }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="总成本合计(元)">
<template scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini">
<span>{{ scope.row.cost }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<span
@click="handleEdit(scope.$index, scope.row)"
class="all-price-handle"
>编辑</span
>
<span
@click="handleDelete(scope.$index, scope.row)"
class="all-price-handle"
>删除</span
>
</template>
</el-table-column>
</el-table>
data() {
return {
tableDatas: [
{
isOK: false,
material: "12.00",
process: "23.00",
other: "23.00",
test: "sf",
safe: "wer",
profit: "3.73",
added: "2343.73",
cost: "2343.73",
},
],
}
}
methods: {
handleEdit(index, row) {
row.isOK = !row.isOK;
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}