v-for迴圈載入el-card並控制自動展開收起
阿新 • • 發佈:2019-02-11
最近一直在做vue的專案,遇到一個需要迴圈載入el-card並且每個可以自由展開,收起,剛接觸vue,覺得頁面不能用jquery真是硬傷,問了同事, 查了資料最後終於解決了,寫出了的程式碼很簡單但是過程挺艱難,所以總結一下:
頁面程式碼:
change方法:<el-card class="box-card" v-for="(month,index) in monthdata" v-if="index==0" v-bind:month="month" v-bind:index="index"> <div slot="header" class="clearfix"> <span style="line-height: 36px;font-size:17px ;color:#666 ;"><i style="color:#20a0ff ;font-style: normal;"> =={{ index }} - {{ month.C_YEAR_MONTH }}</i> 月度目標</span> <i style="float: right;color:#20a0ff;line-height: 36px;cursor: pointer;" class="el-icon-caret-bottom" v-on:click="change(month.C_ID)"></i> </div> <div :id="month.C_ID" > <el-form ref="form" :model="form" :rules="rules" label-width="110px"> <el-row class="area"> <el-form-item label="月目標要求"> <el-input v-model="form.C_TARGET" type="textarea"></el-input> </el-form-item> <el-row> <el-col :span="11"> <el-row> <el-col :span="22"> <el-form-item label="進度要求完成到" > <el-input v-model="form.C_PROCESS" ></el-input> </el-form-item> </el-col> <el-col :span="2"><span style="line-height: 36px"> %</span></el-col> </el-row> </el-col> <el-col :span="11" :offset="2"> <el-form-item label="核定工作量"> <el-input v-model="form.C_WORK_LOAD"></el-input> </el-form-item> </el-col> </el-row> </el-row> </div> </el-card>
change:function (data){
let dv=document.getElementById(data);
if(dv.className=='show')
dv.removeAttribute("class");
else
dv.setAttribute("class", "show");
}
show樣式:
.show{display:none;}