element的表格这种表头怎么实现？

Question

第一行是表头，第二行是搜索框

Answer 1

可以通过$index=0进行判断，显示第二行

<el-table :data="dataList" size="mini" border class="mt15">
      <el-table-column label="商户号" align="center">
        <template slot-scope="scope">
          <el-input
            v-if="scope.$index === 0"
            size="mini"
            v-model="scope.row.customNum"
          ></el-input>
          <span v-else>{{ scope.row.customNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="特约商户号"
        prop="customNum1"
        align="center"
      ></el-table-column>
      <el-table-column label="设备号"></el-table-column>
      <el-table-column label="微信订单号"></el-table-column>
    </el-table>

data() {
  return {
    dataList: [
        {
          customNum: "",
          customNum1: "",
        },
        {
          customNum: 123,
          customNum1: 456,
        },
      ],
  }
}

Answer 2

如果使用的是 ElementUI，在 tableData 上通过 unshift() 插入一行空白记录，然后再单独通过 scope.$index 做判断就好，之后就按照 @前端搬运工 的回答写模板就好了。

如果不是 EleUI，思路也是一样的，只不过判断第一行的方式稍有改动。