<template>
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-button type="primary" @click="submitAdd" style="float: right;margin-bottom:20px">新增一行</el-button>
<el-form ref="form" :model="form" :rules="rules">
<el-table stripe :data="form.tableData" border>
<el-table-column label="序号" align="center" type="index" />
<el-table-column align="center">
<template slot="header">
<span><span class="colorRed">*</span>名称</span>
</template>
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.name`" :rules="rules.name" >
<el-input v-model="scope.row.name" placeholder="请输入名称" class="input"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header">
<span><span class="colorRed">*</span>支架</span>
</template>
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.holderData`" :rules="rules.holderData">
<el-input v-model="scope.row.holderData" placeholder="请输入支架" class="input"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header">
<span><span class="colorRed">*</span>已知容量</span>
</template>
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.capacityKnown`" :rules="rules.capacityKnown">
<el-input v-model="scope.row.capacityKnown" placeholder="请输入已知容量" class="input"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header">
<span><span class="colorRed">*</span>容量</span>
</template>
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.capacityData`" :rules="rules.capacityData">
<el-input v-model="scope.row.capacityData" placeholder="请输入容量" class="input"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header">
<span><span class="colorRed">*</span>长距离</span>
</template>
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.isLong`" :rules="rules.isLong">
<el-input v-model="scope.row.isLong" placeholder="请输入长距离" class="input"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<template slot="header">
<span><span class="colorRed">*</span>压力损失数据</span>
</template>
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.pressureData`" :rules="rules.pressureData">
<el-input v-model="scope.row.pressureData" placeholder="请输入压力损失数据" class="input"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="130px" >
<template slot-scope="scope">
<el-button type="text" @click="tableDataDelete(scope.$index)">移除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" v-if="form.tableData.length >= 1">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
export default{
data(){
return{
form: {
tableData: [],
// 表单校验
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
holderData: [{ required: true, message: '请输入支架', trigger: 'blur' }],
capacityKnown: [{ required: true, message: '请输入已知容量', trigger: 'blur' }],
capacityData: [{ required: true, message: '请输入容量', trigger: 'blur' }],
isLong: [{ required: true, message: '请输入长距离', trigger: 'blur' }],
pressureData: [{ required: true, message: '请输入压力损失数据', trigger: 'blur'}],
}
},
}
},
methods:{
//添加
submitAdd() {
this.form.tableData.push({
name: '',
holderData: '',
capacityKnown: '',
capacityData: '',
isLong: '',
pressureData: ''
})
console.log(this.form.tableData)
},
//删除
tableDataDelete(index) {
this.form.tableData.splice(index, 1)
}
}
}
效果图