element+vue表格点击变成输入框并获取焦点（可编辑状态）

完整html内容

      <!-- 表格 -->
      <el-table class="table"
                stripe
                border
               :header-row-style="{'font-size':'14px',padding:'0px'}"
               :row-style="{'font-size':'14px',padding:'0px',height:'30px'}"
               :cell-style="{padding:'0px'}"
                v-if="deliverGoodsruleForm.state==1"
                @cell-click="cellClick"
                :row-class-name="tableRowClassName"
                :cell-class-name="tableCellClassName"
                :data="deliverStateList"
                highlight-current-row
                style="width: 100%">
        <el-table-column v-for="(val, i) in shipStatusList"
                         :fixed="i == 0"
                         :key="i"
                         :label="val.name"
                         :min-width="val.w"
                         align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '可发货数量'"
                 class='inputnum'>
              <el-input v-model="scope.row[val.value]"
                        ref='editInput'
                        type="number"
                        size="mini"
                        @blur="inputBlur(scope)" />
            </div>
            <div class="inputnum"
                 v-else>{{ scope.row[val.value] }}</div>
          </template>
        </el-table-column>
      </el-table>

data中定义内容

	  rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      currentPage: 1,
      pageSize: 10,
      total: 0,
      theadList: [
        { name: '合同编号', value: 'contractNo', w: '110' },
        { name: '合同简码', value: 'contractShortCode', w: '100' },
        { name: '订单号', value: 'purchaseOrderCode', w: '100' },
        { name: '业主单位', value: 'ownerUnitName', w: '170' },
        { name: '物料编码', value: 'materialCode', w: '100' },
        { name: '物料名称', value: 'materialName', w: '150' },
        { name: '物料描述', value: 'materialDescription', w: '100' },
        { name: '供应商名称', value: 'supplierName', w: '180' },
        { name: '订单数量', value: 'orderQuantity', w: '100' },
        { name: '提单数量', value: 'totalLadingNumber', w: '80' },
        { name: '在途数量', value: 'transitQuantity', w: '80' },
        { name: '到厂数量', value: 'arrivalsQuantity', w: '80' },
        { name: '未发货数量', value: 'unShippedQuantity', w: '100' },
        { name: '发货状态', value: 'deliveryStatusStr', w: '80' },
        { name: '可发货数量', value: 'shippedQuantity', w: '100' },
        { name: '到港时间', value: 'toPortDate', w: '170' },
        { name: '订单状态', value: 'orderStatusStr', w: '100' },
        { name: '要求供货日期', value: 'requestDeliveryDate', w: '160' },
        { name: '订单完成日期', value: 'orderCompletionDate', w: '160' },
        { name: '交货地址', value: 'deliveryAddress', w: '100' },
      ],
      dataList: [{
        createTime: "2021-02-23 17:30:13"
		createUserCode: "80600096"
		delFlag: 0
		email: "[email protected]"
		forwarderShippedQuantity: 69
		id: "1364145528022151170"
		legalName: "申xx"
		name: "湖南xxxx科技有限公司"
		orderId: "1364144342464376834"
		sapCode: "80xx74"
		status: "2"
		statusName: "正式供应商"
		telNumber: "136xxxxx154"
		transportWay: 1
		transportWayStr: "铁路运输"
		updateTime: "2021-02-25 14:10:00"
		updateUserCode: "801xx293"
		}
		{
		createTime: "2021-02-23 17:30:17"
		createUserCode: "80600096"
		delFlag: 0
		email: "[email protected]"
		forwarderShippedQuantity: 88.88
		id: "1364145545109745665"
		legalName: "梁x"
		name: "柳州xxxx有限公司"
		orderId: "1364144342464376834"
		sapCode: "802966"
		status: "2"
		statusName: "正式供应商"
		telNumber: "134xxxxx698"
		transportWay: 2
		transportWayStr: "水路运输"
		updateTime: "2021-02-25 14:10:00"
		updateUserCode: "801xxx93"}
      ],

js内容根据需求可自行调整

methods: {
        //把每一行的索引加到行数据中
        tableRowClassName({ row, rowIndex }) {
      	  row.index = rowIndex
         },
         //把每一列的索引加到列数据中
        tableCellClassName({ column, columnIndex }) {
       	  column.index = columnIndex
     	 },
     	 //单元格被点击时会触发该事件
     	cellClick(row, column, cell, event) {
  		    // console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)
   			 if (column.label == '可发货数量') {
             this.rowIndex = row.index
		     this.columnIndex = column.index
             this.$nextTick(() => {
              this.$refs['editInput'][0].focus()//没有没有自动聚焦效果的话可能是这里出现问题 需要打印出来看一下
              //console.log(this.$refs['editInput'])
        })
      }
    },
  		  //输入框失去焦点事件（初始化中间变量）
  		inputBlur(scope) {
    	  this.rowIndex = -1
  		  this.columnIndex = -1
    },
        }