El componente de la tabla Vue elementui hace clic en cada fila para ingresar el contenido correspondiente para el envío (versión completa)
在日常需求中，表格很常见，那么如果表格中内容要求可输入修改该怎么办呢？下面我将提供完整代码以及说明；
html
<el-table
:data="configTableList"
highlight-current-row
:header-cell-style="{
background: 'transparent',
fontWeight: 'bold',
}"
@select="handleClickCheck"
@select-all="handleClickAll"
ref="multipleTable"
:row-key="rowKey"
class="road-container"
>
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
/>
<el-table-column label="英文名" prop="attrOriName" align="left">
</el-table-column>
<el-table-column prop="attrChName" label="中文名" align="center">
<template slot-scope="{ row, $index }">
*<div
第一步：点击列内容的事件
@click.stop="
{
{
handleClickInputEdit($index, 'editRemarkInput');
}
}
"
>
第二步：Input事件 => (1) input既可以回车确定内容也可以点击其他行确定内容
<el-input
v-if="editChTableRow[$index]"
v-model="row.attrChName"
@change="handleChangeInput(row, 'editTableRowContent')"
size="mini"
class="editRemarkInput"
@keyup.enter.native="handleEditRow($index, row.attrChName)"
></el-input>*
<span v-else>{
{
row.attrChName || "暂无" }}</span>
</div>
</template>
</el-table-column>
</el-table>
js
// 点击列内容
handleClickInputEdit(index, className) {
this.editChTableRow = new Array(this.configTableList.length);
this.editChTableRow[index] = true;
this.$nextTick(function () {
// 鼠标自动聚焦输入框
var editInputList = document.getElementsByClassName(className);
editInputList[0].children[0].focus();
});
},
// 修改中文名时输入框回车事件
handleEditRow(index, attrChName) {
this.editChTableRow = new Array(this.configTableList.length);
this.editChTableRow[index] = false;
},
// 修改当前行时点击其他行也可修改完成
handleChangeInput(row) {
this.handleEditRowStateApi(row, row.needShowOnTag); // 我们的修改接口，换成你们的接口
},