<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" border
class="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>
效果默认展示一行
点击按钮可以添加行