vue的el-table表格点击添加要素出现一个新的div

最新推荐文章于 2024-03-07 13:50:16 发布

原创最新推荐文章于 2024-03-07 13:50:16 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #el-table

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种通过界面配置要素属性并实现数据输出的方法。用户可通过下拉菜单选择不同的要素类型，并设置标识符、无效量等参数。支持动态显示特定选项如旋转方向和初相，同时提供了添加和保存功能来构建及导出数据配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <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
        }],
        
    //其他值就不贴上来了
}
}