Vuetify.js 2-使用babel-polyfill时数据表页脚不能正确显示

Question

我使用的是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，如下所示。

package.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.js

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

vue.config.js

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

main.js

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中打开这个认证文档页面时，页脚显示正常，为什么？

​

Answer 1

尝试使用以下样式作为解决方法。也许你需要根据自己的需要调整像素大小。

// 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;
}