如何解决Vue.Draggable 可以与 Vuetify v-data-table 一起使用并允许使用表 v-slot:item.<name> 吗?
Vuetify library(ggplot2)
library(reshape2)
x.All=as.data.frame(cbind(index=1:nrow(x.All[-1,]),x.All[-1,]))
colnames(x.All)=c("index",paste("X",1:length(start_init)),"objfun")
print(x.All)
df <- melt(x.All,id.vars = 'index',variable.name = 'series')
print(df)
#create line plot for each column in data frame
ggplot(df,aes(index,value)) + geom_line(aes(colour = series))
支持多种类型的插槽:v-data-table
、v-slot:body
和 v-slot:item
。
我们一直在广泛使用 v-slot:item.<name>
,因为它们提供了一种灵活的方式来设计和处理各个列中的内容,并允许以编程方式更改表头。
我想为我的 v-slot:item.<name>
行添加可拖动性,并使用 Vue.Draggable 使其工作。
然而,v-data-table
组件需要使用 draggable
v-data-table
,即控制整个表格,从而失去 v-slot:body
的灵活性。
有没有办法将这两个组件一起使用并提供 v-slot:item.<name>
支持?
解决方法
我创建了一个允许 DataTableRowHandler
支持的 v-slot:item.<name>
组件。
这被放置在 draggable
组件内,插入表 <tr>
元素并提供相同的“headers”数组以插入 <td>
元素和 v-slot:item.<name>
条目。如果未定义 v-slot:item.<name>
,则输出单元格值,与 v-data-table
的工作方式相同。
以下是组件用法示例:
<v-data-table
ref="myTable"
v-model="selected"
:headers="headers"
:items="desserts"
item-key="name"
class="elevation-1"
>
<template v-slot:body="props">
<draggable
:list="props.items"
tag="tbody"
:disabled="!allowDrag"
:move="onMoveCallback"
:clone="onCloneCallback"
@end="onDropCallback"
>
<data-table-row-handler
v-for="(item,index) in props.items"
:key="index"
:item="item"
:headers="headers"
:item-class="getClass(item)"
>
<template v-slot:item.lock="{ item }">
<v-icon @click="item.locked = item.locked ? false : true">{{
item.locked ? "mdi-pin-outline" : "mdi-pin-off-outline"
}}</v-icon>
</template>
<template v-slot:item.carbs="{ item }">
{{ item.carbs }}
<v-icon>{{
item.carbs > 80
? "mdi-speedometer"
: item.carbs > 45
? "mdi-speedometer-medium"
: "mdi-speedometer-slow"
}}</v-icon>
</template>
</data-table-row-handler>
</draggable>
</template>
</v-data-table>
这是DataTableRowHandler
组件代码
<template>
<tr :class="getClass">
<td v-for="(header,index) in headers" :key="index">
<slot :item="item" :name="columnName(header)">
<div :style="getAlignment(header)">
{{ getNonSlotValue(item,header) }}
</div>
</slot>
</td>
</tr>
</template>
<script>
export default {
name: "DataTableRowHandler",components: {},props: {
itemClass: {
type: String,default: "",},item: {
type: Object,default: () => {
return {};
},headers: {
type: Array,default: () => {
return [];
},data() {
return {};
},computed: {
getClass() {
return this.itemClass;
}
},methods: {
columnName(header) {
return `item.${header.value}`;
},getAlignment(header) {
const align = header.align ? header.align : "right";
return `text-align: ${align}`;
},getNonSlotValue(item,header) {
const val = item[header.value];
if (val) {
return val;
}
return "";
},};
</script>
它的一个例子是在这个 codesandbox link
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。