element 新增表单中自定义表格

自定义表格

<div class="formtable">
  <div class="row">
    <div class="col1">序号</div>
    <div class="col2">数值</div>
    <div class="col3">温度</div>
    <div class="col4">时间</div>
    <div class="col5">操作</div>
  </div>
  <div class="row" v-for="(item, index) in tablelist" :key="index">
    <div class="col1">机头{{ index + 1 }}</div>
    <div class="col2">
      <el-input-number
        v-model="item.checkNum"
        :min="0"
        :max="999999999"
        :step="0.0001"
        step-strictly
        size="small"
        placeholder="请输入数值"
        style="width: 100%"
      />
    </div>
    <div class="col3">
      <el-input-number
        v-model="item.checkTemperature"
        :min="0"
        :max="999999999"
        :step="0.0001"
        step-strictly
        size="small"
        @change="calTemperature"
        placeholder="请输入温度"
        style="width: 100%"
      />
    </div>
    <div class="col4">
      <el-input-number
        v-model="item.checkTime"
        :min="0"
        :max="999999999"
        :step="0.0001"
        step-strictly
        size="small"
        placeholder="请输入时间"
        style="width: 100%"
      />
    </div>
    <div class="col5">
      <el-button
        icon="el-icon-minus"
        style="width: 26px; height: 26px; padding: 0"
        @click="delOne(index)"
        circle
      ></el-button>
      <el-button
        v-if="index + 1 == tablelist.length"
        icon="el-icon-plus"
        style="width: 26px; height: 26px; padding: 0"
        @click="addOne"
        circle
      ></el-button>
    </div>
  </div>
</div>

delOne(index) {
  this.tablelist.splice(index, 1);
  if (this.tablelist.length == 0) {
    this.tablelist.push({});
  }
},
addOne() {
  this.tablelist.push({});
},

.formtable {
  width: 100%;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
  .row {
    display: flex;
    justify-content: space-between;
    .col1 {
      width: 12%;
    }
    .col2 {
      width: 25%;
    }
    .col3 {
      width: 25%;
    }
    .col4 {
      width: 25%;
    }
    .col5 {
      width: 13%;
      > .el-button:last-child {
        margin-right: 0;
      }
    }
    > div {
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
  }
}