<template>
<div>
<el-table
@cell-click="cellClick"
:row-class-name="tableRowClassName"
:cell-class-name="tableCellClassName"
:data="tableData"
style="width: 500px"
border
>
<el-table-column prop="weightName" label="权重项">
<template slot-scope="{ row, column }">
<el-input
v-if="row.index == rowIndex && column.index == columnIndex"
v-model="row.weightName"
@blur="inputBlur"
></el-input>
<span v-else>{{ row.weightName }}</span>
</template>
</el-table-column>
<el-table-column prop="weightPer" label="比例">
<template slot-scope="{ row, column }">
<el-input
v-if="row.index == rowIndex && column.index == columnIndex"
v-model.number="row.weightPer"
type="number"
@blur="inputBlur(row)"
></el-input>
<span v-else>{{ row.weightPer }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>文章来源：https://www.toymoban.com/news/detail-660915.html
<script>
export default{
data() {
return {
tableData: [],
rowIndex: -1, //行索引
columnIndex: -1, //列索引
};
},
methods:{
tableRowClassName({ row, rowIndex }) {
// 把每一行的索引放到row里
row.index = rowIndex;
},
tableCellClassName({ column, columnIndex }) {
// 把每一列的索引放到column里
column.index = columnIndex;
},
cellClick(row, column) {
this.rowIndex = row.index;
this.columnIndex = column.index;
},
// 失去焦点
inputBlur() {
this.rowIndex = -1;
this.columnIndex = -1;
},
}
}
</script>文章来源地址https://www.toymoban.com/news/detail-660915.html
到了这里，关于el-table点击单元格可编辑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
