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

完整html内容

      <!-- 表格 -->
      <el-table class="table"
                stripe
                border
                :data="dataList"
                @cell-click="tabClick"
                :row-class-name="tableRowClassName"
                :cell-class-name="tableCellClassName"
                style="width: 100%">
        <el-table-column v-for="(val, i) in theadList"
                         :fixed="i == 0"
                         :key="i"
                         :label="val.name"
                         :min-width="val.w"
                         align="center">
          <template slot-scope="scope">

            <span v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
              <el-input v-model="scope.row[val.value]"
                        @blur="inputBlur(scope)" />
            </span>
            <span v-else>{{ scope.row[val.value] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
                         width="180">
          <template slot-scope="scope">
            <el-button @click="materialDetailClick(scope.row.id,scope.row.businessesId)"
                       type="text">查看物资详情</el-button>
            <!-- 弹窗提示 -->
            <el-button @click="finishOrderClick(scope.row,'finishorder')"
                       type="text">完成订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :current-page="currentPage"
                     :page-sizes="[10, 30, 50]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />

data中定义内容

	  rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      currentPage: 1,
      pageSize: 10,
      total: 0,
      theadList: [
        { name: '合同编号', value: 'contractNum', w: '10%' },
        { name: '订单号', value: 'orderNum', w: '15%' },
        { name: '业主单位', value: 'owner', w: '10%' },
        { name: '采购部门', value: 'purchasing', w: '10%' },
        { name: '订单状态', value: 'status', w: '10%' },
        { name: '要求供货日期', value: 'supplyDate', w: '15%' },
        { name: '订单完成日期', value: 'finishDate', w: '15%' },
        { name: '交货地址', value: 'deliveryAddress', w: '15%' },
      ],
      dataList: [
        {
          id: 4500000469,
          businessesId: 4500000469,
          contractNum: '20160502',
          orderNum: '20160502',
          owner: '金沙',
          purchasing: '事业部',
          status: '1',
          supplyDate: '2016-05-02',
          finishDate: '2016-05-03',
          deliveryAddress: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 4500000503,
          businessesId: 4500000503,
          contractNum: '20160503',
          orderNum: '20160503',
          owner: '金沙',
          purchasing: '事业部',
          status: '4',
          supplyDate: '2016-06-02',
          finishDate: '2016-06-03',
          deliveryAddress: '上海市普陀区金沙江路 1518 弄',
        },
      ],

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

methods: {
        //把每一行的索引加到行数据中
        tableRowClassName({ row, rowIndex }) {
      	  row.index = rowIndex
         },
         //把每一列的索引加到列数据中
        tableCellClassName({ column, columnIndex }) {
       	  column.index = columnIndex
     	 },
     	 //单元格被点击时会触发该事件
     	tabClick(row, column, cell, event) {
    	  console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)
    	  this.rowIndex = row.index
    	  this.columnIndex = column.index
  		  },
  		  //输入框失去焦点事件（初始化中间变量）
  		inputBlur(scope) {
    	  this.rowIndex = -1
  		  this.columnIndex = -1
    },
        }

标签：vue,name,columnIndex,column,value,element,输入框,rowIndex,row
来源： https://blog.csdn.net/weixin_49866029/article/details/112792794