步骤:
模板中配置列:

<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
      })
    }

看效果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐