动态模态框实现的方式

结合element组件库实现动态模态框，主要实现的功能为：默认为当前一行，当点击输入时自动生成一行。

效果如下：

首先，显示table表格代码

<el-table
    v-loading="loading"
    :data="orderDetailList"
    height="calc(100vh - 470px)"
    border
    style="width: 100%">
    <el-table-column
       type="index"
       label="序号"
       align="center"
       width="250">
     </el-table-column>
     <el-table-column
       label="检测设备编码"
       align="center"
       prop="deviceSn">
       <template slot-scope="{row,$index}">
           <el-form-item :prop="'orderDetailList['+parseInt($index)+'].detectDeviceSn'" :rules="getFormItemRules(row,$index)">
                 
              <el-input
                 v-model="row.detectDeviceSn"
                 size = 'mini'
                 placeholder="请输入检测设备编码"
                 @focus='checkIsLast($index)'>
               </el-input>
           </el-form-item>
        </template>
     </el-table-column>
     <el-table-column
        label="检测设备类型"
        align="center"
        prop="detectDeviceTypeName">
     </el-table-column>
     <el-table-column
        label="售出单价（元）"
        align="center"
        prop="price">
        <template slot-scope="{row,$index}">
          <el-form-item :prop="'orderDetailList['+parseInt($index)+'].price'" :rules="getFormPriceRules(row)">
                 
             <el-input size="mini" v-model="row.price" placeholder="请输入售出单价"></el-input>
          </el-form-item>
        </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
       <template slot-scope="scope">
         <el-button type="text" size="mini" @click="clearCloumn(scope.$index,scope.row)">清空</el-button>
        </template>
     </el-table-column>
   </el-table>

给定默认数据，初始为默认一行

data(){
    return{
      loading: true,
      orderDetailList:[
        {
          detectDeviceSn: '',
          detectDeviceType: '',
          price: ''
        },
      ]
      
    }
 }

使用getFormItemRules和getFormPriceRules对表格进行动态验证，必须存在一条数据才可添加成功

// 检测设备编码校验
    getFormItemRules(row,index){
      if(index == 0){
        // console.log("当前行",row)
        if(row.detectDeviceSn == '' || !row.detectDeviceSn){
          const rules = [{required: true,message: '检测设备编码不能为空',trigger:'manual'}]
          return rules
        }else{
          return []
        }
      }

    },
    // 售出单价校验
    getFormPriceRules(row){
      if(row.detectDeviceSn != ''){
        if(row.price == ''){
          const rules = [{required: true,message: '售出单价不能为空',trigger:'manual'}]
          return rules
        }else{
          // row.price = row.price*100
          return []
        }
      }
    },

判断当前输入行是否为最后一行，当为最后一行时，自动添加一行

// 检测当前行数是否为默认或者新增最后一行
    checkIsLast(index){
      if(index){
        if(this.orderDetailList.length<= index+1){
          this.orderDetailList.push({
            detectDeviceSn: '',
            detectDeviceType: '',
            price: ''
          })
        }
        
      }
    },

点击清空按钮时，清除当前行的数据

// 清空当前行
    clearCloumn(index,row){
      this.orderDetailList.splice(index,1,{
        detectDeviceSn: '',
        detectDeviceType: '',
        price: ''
      }) 
      //  console.log("被清空",this.orderDetailList)
    },