Vuetify.js 2 - babel-polyfill을 사용하면 데이터 테이블 바닥글이 올바르게 표시되지 않음

Vuetify.js 2 - babel-polyfill을 사용하면 데이터 테이블 바닥글이 올바르게 표시되지 않음

Vuetify.js 2.0.10의 데이터 테이블을 사용하고 있습니다.바닥글이 IE11에서 아래처럼 올바르게 표시되지 않습니다.

나는 이 서류를 읽었다.https://vuetifyjs.com/en/getting-started/quick-start#ie-11-safari-9-support

babel-polyfill과 @/babel/preset-env를 설치하고 babel.config.js와 vue.config.js를 bellow와 같이 설정했습니다.

패키지.json

{
"name": "table-test",
"version": "0.1.0",
"private": true,
...
"dependencies": {
    "babel-polyfill": "^6.26.0",
    "vue": "^2.6.10",
    "vuetify": "^2.0.10",
    ...
},
"devDependencies": {
    "@babel/preset-env": "^7.5.5",
    ...
}
}

babel.config.syslog

module.exports = {
presets: [
    '@vue/app',
    '@babel/preset-env'
]
}

vue.config.module

module.exports = {
    transpileDependencies: ["vuetify"]
}

main.discloss.main.discloss.

import "babel-polyfill";  // polyfill
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");

Vue 템플릿

<template>
<v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"
></v-data-table>

</template>
<script>
export default {
data: () => ({
    headers: [
        ...
    ],
    desserts: [
        ...
    ]
}),
};
</script>

제 질문은 1번입니다.이 문제를 해결할 방법이 있습니까? 2. IE11 https://vuetifyjs.com/en/components/data-tables에서 이 Vuetify 문서 페이지를 열면 바닥글이 올바르게 표시됩니다. 이유는 무엇입니까?

회피책으로서 다음의 스타일을 사용해 주세요.필요에 따라 픽셀 크기를 조정해야 할 수도 있습니다.

// IE11 Data table footer fix
.v-data-footer__select {
  flex-basis: auto;

  .v-select {
    flex-basis: 50px;

    .v-select__selections {
      flex-basis: auto;
    }
  }
}

.v-list-item__content {
  flex: 1 1 auto;
  min-width: 40px;
}

언급URL : https://stackoverflow.com/questions/57660512/vuetify-js-2-data-tables-footer-does-not-display-properly-with-babel-polyfill