vue фрейм в IE браузере IE браузер имеет плохую отрисовку - PullRequest
Новая
       125

vue фрейм в IE браузере IE браузер имеет плохую отрисовку

0 голосов
/ 04 августа 2020 
<!DOCTYPE html>
<html>
<head>
    
    <script type="text/javascript" src="../../plugins/vue/vue.js"></script>

</head>
<body>
    <div id="statistics">
    <div v-for="(item,index) in topKeyWords" v-if="(index < 5)" :key="index" >
        <template v-for="(val,key,i) in item">
            <td ><img :src="'images/ssht/pm'+(index+1)+'.jpg'"/></td>
            <td class="ssc" v-if="(key.length > 12)" :title="key">{{key.substring(0,10)+"..."}}</td>
            <td class="ssc" v-if="(key.length <= 12)">{{key}}</td>
            <td v-if="(item[key] != undefined && item[key] !=null)">{{item[key]}}</td>
            <td v-if="(item[key] == undefined)">0</td>
            key:{{key}},item:{{item}}
        </template>
    </div>
    </div>
</body>

<script type="text/javascript">

var statisticsVue =new Vue({
    el: '#statistics',
    data: function() {
    return {
            topKeyWords:[{平稳: 4}, {测试: 4}, {情况: 1}],
            isLoading: true
        }
    }
});
</script>
</body>
</html>

данные - это список объектов, и я хочу итератор. Я использую браузер Chrome и показываю очень хорошо, но тестер будет использовать другой браузер, включая IE,

IE браузер v-if не запускается, а chrome в порядке,

chrome браузер

1 Ответ

0 голосов
/ 04 августа 2020

Похоже, это известная проблема. Я нашел несколько старых веток с похожими проблемами.

Если вы проверите исходный код в браузере IE, то вы можете заметить, что в коде не отображаются теги td . тогда как ваш фактический код содержит теги td . Другие браузеры также показывают это, поэтому это вызвало указанную проблему в браузере IE.

В некоторых предложениях в старых обсуждениях говорилось, что вы можете попробовать использовать tbody и tr вместо использования шаблона. Так что вы можете попробовать провести с ним тест.

пример кода: 

<table>
<tbody v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</tbody>
</table>

Ссылки:

...