VUE element-ui 之table表格第一行插入输入框

步骤：
模板中配置列：

<el-table-column label="序号" width="70" align="center">
   <template slot-scope="scope">
     <div v-if="scope.$index == 0" />
     <div v-else>{{ (scope.$index) }}</div>
   </template>
 </el-table-column>
  <el-table-column label="订单编号" width="130" align="center" prop="purchase_order_num">
    <template slot-scope="scope">
      <div v-if="scope.$index == 0"> 注意：判断是第一行插入输入框或下拉菜单等，根据需求做调整
        <el-input v-model="inputVal" size="small" placeholder="点击输入编号" />
      </div>
      <div v-else>{{ (scope.row.purchase_order_num) }}</div>
    </template>
  </el-table-column>
  <el-table-column label="自编号" width="130" align="center" prop="project_name">
    <template slot-scope="scope">
      <div v-if="scope.$index == 0">
        <el-input v-model="inputVal" size="small" placeholder="点击输自编号" />
      </div>
      <div v-else>{{ (scope.row.project_name) }}</div>
    </template>
  </el-table-column>

js部分：

data() {
    return {
      inputVal: '',
      Data: []
  },

// 更新数据
    upData() {
      dataDetail.getAl(this.params).then(res => {
        res.unshift({}) //注意：这一步不能省，否则表格展示数据还是从第一行开始（相当于将第一行数据替换为空）
        this.Data = res
      })
    }

看效果：