el-table user input form

1. The first is to insert the input box into the form – the slot can be used
2. To control the display of the input box, add display control
3. Click event, the input box is not displayed when the mouse moves away

<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" size="mini" @cell-click="tabClick">      
	<el-table-column label="可编辑" 
	     <template slot-scope="scope">
	           <div
	                @click.stop
	                v-if="edit.rowIndex == scope.$index"
	                class="e-item"
	              >
	              <el-input
	                    clearable
	                    :ref="column.field + scope.$index"
	                    v-model="test"
	                    @blur="inputBlur"
	                  ></el-input>
	                </div>
	     </template>
	</el-table-column>
</el-table>

Set index through tableRowClassName

tableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
}

Set the edit.rowIndex value through the cell click event

// tabClick row 当前行 column 当前列
tabClick (row, column, cell, event) {
      switch (column.label) {
        case '可编辑':
          this.edit.rowIndex = row.index
          break
        default: return
      }
}

Cell loses focus event

// 失去焦点初始化
inputBlur (row) {
     this.edit.rowIndex = -1；
}