<div class="main" >
          <el-table
            :data="details"
            style="width:100%;">
            <el-table-column
              v-if="false"
              prop="id"
              label="id"
            >
            </el-table-column >
            <el-table-column
              label="要素列表"
              align="center"
              font-size="300"
              width="280" >
              <template slot-scope="scope">
                <el-select v-model="scope.row.selectelemvalue" placeholder="请选择" size="small"  style="width:150px;left: 39px" >
                  <el-option
                    v-for="item in selectelem"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    v-bind:class="addWind()">
                  </el-option>
                </el-select>
                <div>标识符:
                  <el-input size="mini" placeholder="输入标识符" v-model="scope.row.inputelem1"  clearable  style=" width:150px;left: 8px" > </el-input></div>
                <div>无效量:
                  <el-input size="mini" placeholder="输入无效量" v-model="scope.row.inputelem2" clearable  style=" width:150px;left: 8px" ></el-input></div>
                <div>偏移量:
                  <el-input size="mini" placeholder="输入偏移量" v-model="scope.row.inputelem3" clearable  style=" width:150px;left: 8px" ></el-input></div>
                <div>放大系数:
                  <el-input size="mini" placeholder="输入放大系数量" v-model="scope.row.inputelem4" clearable  style=" width:150px;left: 2px" ></el-input></div>
                <div>点数:
                  <el-select v-model="scope.row.selectpointvalue" placeholder="请选择" size="mini" style=" width:150px;left: 15px">
                    <el-option v-for="item in selectpoint" :key="item.value"  :value="item.value"></el-option>
                  </el-select></div>
                <div v-show="scope.row.isShowDirection" >旋转方向:
                  <el-select  v-model="scope.row.selectdirection" placeholder="请选择" size="mini" style=" width:150px">
                    <el-option v-for="item in selectdir" :key="item.value" :label="item.lable" :value="item.value"
                    ></el-option>
                  </el-select></div>
                <div v-show="scope.row.isShowAngle">初相:
                  <el-select  v-model="scope.row.selectAngle" placeholder="请选择" size="mini" style=" width:150px;left:15px">
                    <el-option v-for="item in selectAng" :key="item.value"  :value="item.value" ></el-option></el-select>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button-group >
            <el-button type="primary" size="mini" @click="handleAdd" round>添加要素</el-button>
            <el-button type="primary" size="mini" @click="handleSave"round>输出数据</el-button>
          </el-button-group>
        <!--</div>-->
      </div>
  handleAdd() {
        this.details.push({
          selectelemvalue:null,
          inputelem1:null,
          inputelem2:null,
          inputelem3:null,
          inputelem4:null,
          selectpointvalue:null,
          selectdirection:null,
          selectAngle: null,

        });
        this.count++;
      },
     handleSave(){
        console.log(this.count)
        var list=[]
        var t=0
        // item:定义的每一条的变量  this.details:要循环的数组
        console.log( this.details)
        for( let item of this.details)
        {
          if(item.selectelemvalue=='海面温度')
          {
            item.selectelemvalue = 'SST'
          }
          var listData= {
            'value':item.selectelemvalue ,
            'lem1':item.inputelem1,
            'lem2':item.inputelem2 ,
            'lem3':item.inputelem3,
            'lem4': item.inputelem4,
            'pointvalue': item.selectpointvalue,
            'direction':item.selectdirection,
            'angle':item.selectAngle
          }
          if(listData.direction == "旋转方向" || listData.angle == "初相" )
          {
            listData.direction = null
            listData.angle = null
          }
          list[t++]=listData
        }
        for(var i=0;i<t;i++) {
          console.log(list[i])
        }
      },

 

data () {
      return {
        details: [{
          selectelemvalue:'海面温度',
          inputelem1:'SST',
          inputelem2:'-32767',
          inputelem3:'0',
          inputelem4:'1e-05',
          selectpointvalue:'10000',
          selectdirection:"旋转方向",
          selectAngle: '初相',
          isShowAngle:false,
          isShowDirection:false
        }],
        
    //其他值就不贴上来了
}
}

点击添加要素之后

Logo

前往低代码交流专区

更多推荐