<el-button size="mini" type="primary" @click="addHang">增加一行</el-button><!-- <el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"> --><el-table tooltip-effect="light" :data="addFormData.productList" borderclass="table"style="width: 100%":row-style="{ height: '15px' }"><el-table-column label="序号"type="index"width="100"align="center"></el-table-column><el-table-column label="名称" prop="productuser" align="center"><template slot-scope="scope"><!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productuser'":rules="addFormRules.productuser" class="all" style="width: 100%;height: 100%;"> --><el-input v-model="scope.row.productuser" placeholder="" clearable class="Tinput"></el-input><!-- </el-form-item> --></template></el-table-column><el-table-column label="规格型号" prop="productName" align="center"><template slot-scope="scope"><!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'":rules="addFormRules.productName" class="all"> --><el-select v-model="scope.row.productName" filterable value-key="id" placeholder="请选择" @change="pestChange($event, scope.$index)"><el-option v-for="item in optionsList" :key="item.id" :label="item.productName":value="item"></el-option></el-select><!-- </el-form-item> --></template></el-table-column><el-table-column label="数量" prop="quantity" align="center"><template slot-scope="scope"><!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.quantity'":rules="addFormRules.quantity" class="all"> --><el-input v-model="scope.row.quantity" placeholder="" clearable ></el-input><!-- </el-form-item> --></template></el-table-column><el-table-column label="图片" prop="tup" align="center"><!-- <ImageUpload></ImageUpload> --></el-table-column><!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"width="150"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"v-hasPermi="['system:order:edit']">增加</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"v-hasPermi="['system:order:remove']">删除</el-button></template></el-table-column> --></el-table>js
data(){return{addFormData: {// 产品列表productList: [
//默认展示一行，就写一组数据{ productName: '',//规格型号productuser:'',quantity:''},],},}
}methods: {
//点击按钮添加空行addHang(){this.$nextTick(() => {this.addFormData.productList.push({productName: '',//规格型号productuser:'',//名称quantity:''})})}}// 再增加一行复用上一行的数据handleUpdateYes(row) {//拿到上一行数据再往数组中push（）新的数据this.addFormData.productList.push({productName: row.productName,//产品名称price: row.price,//单价(元/㎡)productCount: row.productCount, //产品件数totalAmount: '', //小计￥元})},css<style lang="scss" scoped>::v-deep .inputDeep .el-input__inner {border: none !important;box-shadow: none !important;padding: 0px; }::v-deep .textareaDeep .el-textarea__inner {border: none !important;box-shadow: none !important;padding: 0px; }
::v-deep .el-select{width: 100%;
}
::v-deep .seletDeep .el-input__inner{border: none !important;box-shadow: none !important;padding: 0px;
}
::v-deep .el-form-item__content {width: 100%;height: 100%;margin:0
}
::v-deep .all .el-input__inner {border: none !important;box-shadow: none !important;padding: 0px;
border: none !important;box-shadow: none !important;padding: 0px;
}
::v-deep .el-table_1_column_2 is-center .cell{
height: 100%;
}
</style>效果默认展示一行
点击按钮可以添加行
