vuejs2 相关问题

我正在使用 vuetify v-data-table。我使用 SortableJs 实现拖动列，并且还可以调整列的大小。当我拖动列时，它可以正常工作，但之后调整大小不再起作用。我正在使用 vuetify v-data-table。我使用 SortableJs 实现拖动列，并且还可以调整列大小。当我拖动列时，它可以正常工作，但之后调整大小不再起作用。 <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" sort-by="calories" disable-sort v-sortable-table="{onEnd:sortTheHeadersAndUpdateTheKey}" :key="anIncreasingNumber" > </v-data-table> </v-app> </div> 这是我的codepen 提前致谢。正如我在here所看到的，Vuetify 团队现在对执行此功能不感兴趣。感谢您提出功能请求以及对改进 Vuetify 的兴趣。不幸的是，这不是我们现在想要实现的功能。现在，您可以检查这个 CodepPen 它会为您解决问题。如果您不想手动执行此操作，可以安装一个名为 vue-columns-resizes-vuetify 的 npm 包  <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" class="elevation-1" > </v-data-table> </v-app> </div> th, td { border-right: 1px solid grey; } new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { headers: [ { text: 'Dessert (100g serving)', sortable: false, value: 'name'}, { text: 'Calories', sortable: false, value: 'calories' }, { text: 'Fat (g)', sortable: false, value: 'fat' }, { text: 'Carbs (g)', sortable: false, value: 'carbs' }, { text: 'Protein (g)', sortable: false, value: 'protein' }, { text: 'Iron (%)', sortable: false, value: 'iron' }, ], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%', }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%', }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%', }, ], } }, }) var tables = document.getElementsByTagName('table'); for (var i=0; i<tables.length;i++){ resizableGrid(tables[i]); } function resizableGrid(table) { var row = table.getElementsByTagName('tr')[0], cols = row ? row.children : undefined; if (!cols) return; table.style.overflow = 'hidden'; var tableHeight = table.offsetHeight; for (var i=0;i<cols.length;i++){ var div = createDiv(tableHeight); cols[i].appendChild(div); cols[i].style.position = 'relative'; setListeners(div); } function setListeners(div){ var pageX,curCol,nxtCol,curColWidth,nxtColWidth; div.addEventListener('mousedown', function (e) { curCol = e.target.parentElement; nxtCol = curCol.nextElementSibling; pageX = e.pageX; var padding = paddingDiff(curCol); curColWidth = curCol.offsetWidth - padding; if (nxtCol) nxtColWidth = nxtCol.offsetWidth - padding; }); div.addEventListener('mouseover', function (e) { e.target.style.borderRight = '2px solid #0000ff'; }) div.addEventListener('mouseout', function (e) { e.target.style.borderRight = ''; }) document.addEventListener('mousemove', function (e) { if (curCol) { var diffX = e.pageX - pageX; if (nxtCol) nxtCol.style.width = (nxtColWidth - (diffX))+'px'; curCol.style.width = (curColWidth + diffX)+'px'; } }); document.addEventListener('mouseup', function (e) { curCol = undefined; nxtCol = undefined; pageX = undefined; nxtColWidth = undefined; curColWidth = undefined }); } function createDiv(height){ var div = document.createElement('div'); div.style.top = 0; div.style.right = 0; div.style.width = '5px'; div.style.position = 'absolute'; div.style.cursor = 'col-resize'; div.style.userSelect = 'none'; div.style.height = height + 'px'; return div; } function paddingDiff(col){ if (getStyleVal(col,'box-sizing') == 'border-box'){ return 0; } var padLeft = getStyleVal(col,'padding-left'); var padRight = getStyleVal(col,'padding-right'); return (parseInt(padLeft) + parseInt(padRight)); } function getStyleVal(elm,css){ return (window.getComputedStyle(elm, null).getPropertyValue(css)) } }; 它工作得很好，但是你知道如何保存通过这种方法设置的宽度吗？当我拖动并调整大小，然后更改分页或排序顺序时，宽度不会被记住。

vuejs2 vuetify.js

回答 2 投票 0

Vue PWA 刷新后未获取新内容

我是 Vue 新手，并使用 PWA Service-worker 插件创建了一个项目。部署我的应用程序的新版本后，我在控制台中收到以下消息：刷新页面（F5）后，这些消息仍然存在

javascript vue.js vuejs2 service-worker progressive-web-apps

回答 4 投票 0

为 Vuetify 组件全局设置 props（在我的例子中为“v-data-table”）

我的用例如下： v-data-table 的 prop rows-per-page-items 的默认值为 [5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}] API 文档我想超越...

vuejs2 vuetify.js

回答 1 投票 0

具有延迟加载功能的 Vue 命名视图

我正在尝试创建我的路线，但我希望它们都使用我的应用程序中的默认路由器视图。查看文档： https://router.vuejs.org/guide/essentials/named-views.html 我应该是一个...