vue的el-table表格 点击添加要素 出现一个新的div
<div class="main" ><el-table:data="details"style="width:100%;"><el-table-columnv-if="false"prop="id"...
·
<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
}],
//其他值就不贴上来了
}
}
点击添加要素之后
更多推荐
已为社区贡献2条内容
所有评论(0)