灵活的vue

1 prop在循环数组中的应用：

<el-form label-width="26%" ref="productAdd" :model="prodList" :rules="rules">
    <!--####循环开始-->
    <div v-for="(item,key) in prodList" :key="key" :class="{ pageMargin: ispage}">
      <!--新增二级产品-->
      <div v-if="item.addType==2" class="smallShadow">
        <div :class="{ dialogHei: islookpage}" class="el-icon-close" style="float:right;" @click="deleteSecond(key)"></div>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="一级产品:" :prop="key+'.firstProd.prodName'" :rules="rules.firstCode">
              <el-select v-model="item.firstProd.prodName"
                         :class="{ pageInputWidth: ispage}"
                         clearable placeholder="请选择一级产品"
                          :disabled="islookpage">
                <el-option
                  v-for="item in departOne"
                  :key="item.productCode"
                  :label="item.productName"
                  :value="item.productCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

<div v-for="(mannger,index) in item.secondProd.managerInfo" :key="index" :class="index%2==0?'':'thirdBack'">
   <el-row>
      <el-col :span="24">
        <el-col :span="12">
          <el-form-item label="产品经理:" :prop="key+'.secondProd.managerInfo.'+index+'.userName'" :rules="rules.managerCode">
            <el-select :class="{ pageInputWidth: ispage}"
                       placeholder="请选择产品经理"
                       @change="handleManagerList(item.secondProd.managerInfo[index].userName,index,key)"
                       @clear="clearManagerTwo(index,key)" clearable
                       v-model="item.secondProd.managerInfo[index].userName"
                       :disabled="islookpage">
              <el-option
                v-for="item in managerList"
                :key="item.userCode"
                :label="item.userName"
                :value="item.userCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-col>
    </el-row>

export default {
    name: 'addProduct',
    props:['prodAddObj'],
    data(){
      return{
        rules:{
          firstCode:[
            { required: true, message: '请选择一级产品', trigger: 'blur' },
          ],
          }}}
         
commitAdd(){
        this.$refs['productAdd'].validate((valid) => {
          if (valid) {
            addNewProduct().then(data => {
              let resInfo = data.responseInfo
              if (resInfo[0].message == true) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
              } else {
                this.$message.error('提交未成功,' + resInfo[0].messageInfo)
              }
            }).catch(error => {
              console.error(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },