通过样式给出 事件穿透

 样式  ：  pointer-events: none;

 

　　 <el-form-item label="xxx" prop="saleId" >

                <base-selectPage v-model="ruleForm.saleId" :data="subSalesList.length ? subSalesList : salesList"  @change="handleSalesId" key-field="id" show-field="code" search-field="searchField" :tb-columns="salesSelectPageColumns">

                </base-selectPage>

                <div class="saleFlag" v-if="!saleflag" style="pointer-events: none;">

                  <input v-model='ruleForm.saleName'>

                </div>

          </el-form-item>

 

　　.saleFlag{

  　　　　position: absolute;

 　　　　 top:0px;

 　　　　 left: 10px;  

 　　　　width:auto;

 　　　　 input{

   　　　　 width: 80px;

   　　　　 border:none;

    　　　　outline: none;

    　　　　&:disabled{

      　　　　　　background-color: transparent;

   　　　　 }

   　　　　 &:hover{

     　　　　 cursor: pointer;

    　　　　}

 　　 }

 

}

div.v-selectpage div.sp-input-container div.sp-base > span{ color: #333;}

 

 

 给div  进行设置 可穿透样式，来触发下层事件的 下拉选择事件