- <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>
效果默认展示一行

点击按钮可以添加行
