鍍金池/ 問(wèn)答/HTML/ VUE如何解決table里面嵌套循環(huán)生成表格行的問(wèn)題？

VUE如何解決table里面嵌套循環(huán)生成表格行的問(wèn)題？

發(fā)現(xiàn)IE10以上用VUE 1.0生成的表格無(wú)法顯示，而IE9和Chrome都是好的，經(jīng)過(guò)查詢發(fā)現(xiàn)是table下面如果使用了
<template v-for=''> 進(jìn)行循環(huán)然后生成tr 會(huì)因?yàn)闊o(wú)法識(shí)別有效元素而過(guò)濾掉了
但是我現(xiàn)在就需要通過(guò)對(duì)對(duì)象進(jìn)行1-2次的遍歷 然后才生成tr 其中td里面還要根據(jù)判斷生成合并單元格

 <template v-for="weekmodel in firstscoremodel.weekscoremodellist">
                                        <template v-for="thirditem in weekmodel.thirdscoremodellist">

                                            <tr>
                                            <td style="text-align:center;" v-if="$index == 0" rowspan="{{ weekmodel.thirdscoremodellist.length * 2 }}">{{ weekmodel.itemname }}</td>
                                            <td style="text-align:center;" v-if="$index == 0" rowspan="{{ weekmodel.thirdscoremodellist.length * 2 }}">{{ weekmodel.weightfmt }}</td>
                                            <td>{{ thirditem.itemname }}</td>
                                            <td>{{ thirditem.applytype }}</td>
                                            <td>{{ thirditem.cultype }}</td>
                                            <td>{{ thirditem.cycletypename }}</td>
                                            <td>{{ thirditem.managetypename }}</td>
                                            <td>{{ thirditem.scorestandard }}</td>
                                            <td>{{ thirditem.weightfmt }}</td>                                                                                       
                                        </tr>                                                                                       
                                        </template>                                                                       
                                    </template>

上面就是利用template進(jìn)行多次循環(huán)來(lái)輸出，可是在IE10以上就沒(méi)效果，換成component的方式寫其實(shí)是一回事 同樣不行 那不是說(shuō)VUE下面無(wú)法解決嵌套循環(huán)生成tr的問(wèn)題了?請(qǐng)大神指教，謝謝~

回答
編輯回答
未命名

我還真實(shí)頭一次看到循環(huán)template的, 你想要重復(fù)生成tr 那你就循環(huán)tr唄你為什么要循環(huán)template 還有就是規(guī)范一點(diǎn)寫你的tabel標(biāo)簽?zāi)?/p>

2017年1月7日 21:07
編輯回答
鹿惑

直接根據(jù)你上面代碼改的，你放上去試試：

 <template v-for="weekmodel in firstscoremodel.weekscoremodellist">
     <tr v-for="thirditem in weekmodel.thirdscoremodellist">
        <td style="text-align:center;" v-if="$index == 0" rowspan="{{ weekmodel.thirdscoremodellist.length * 2 }}">{{ weekmodel.itemname }}</td>
        <td style="text-align:center;" v-if="$index == 0" rowspan="{{ weekmodel.thirdscoremodellist.length * 2 }}">{{ weekmodel.weightfmt }}</td>
        <td>{{ thirditem.itemname }}</td>
        <td>{{ thirditem.applytype }}</td>
        <td>{{ thirditem.cultype }}</td>
        <td>{{ thirditem.cycletypename }}</td>
        <td>{{ thirditem.managetypename }}</td>
        <td>{{ thirditem.scorestandard }}</td>
        <td>{{ thirditem.weightfmt }}</td>                                                                                       
    </tr>                                                                                                                                                           
</template>
2017年12月26日 16:51