vue elementui table组件点击每行可输入修改对应内容做提交 （完整版）

vue elementui table组件点击每行可输入对应内容做提交 （完整版）

	在日常需求中，表格很常见，那么如果表格中内容要求可输入修改该怎么办呢？下面我将提供完整代码以及说明；

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>

		# 下面的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); // 我们的修改接口，换成你们的接口
    },