如何动态添加元素到DataTable ipyvuetify？
如何动态添加元素到DataTable ipyvuetify？
提问于 2021-04-05 23:14:55
我正在使用ipyvuetify为python工作流创建一个接口。在某些情况下，我需要在DataTable中动态更改项，但我无法设法使其更改。
我创建了这个小用例来展示这个bug。LEts假设我们想要创建一个继承自v.DataTable的新类。该数据表将有3个基于项。在顶部的位置，我将添加一个btn，当单击该btn时，将向项目列表中添加一个元素：
import ipyvuetify as v
class CustomData(v.DataTable):
def __init__(self):
# create a btn to click on
# create the object
super().__init__()
# a header
self.headers = [
{ 'text': 'Dessert (100g serving)', 'value': 'name'},
{ 'text': 'Calories', 'value': 'calories' },
{ 'text': 'Fat (g)', 'value': 'fat' },
{ 'text': 'Carbs (g)', 'value': 'carbs' },
{ 'text': 'Protein (g)', 'value': 'protein' },
{ 'text': 'Iron (%)', 'value': 'iron' },
]
# 3 initial items
self.items = [
{
'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%',
}
]
# add a slot btn
self.btn = v.Btn(children=["click to add item"], color="primary", class_='ma-2')
self.v_slots = [{
'name': 'top',
'children': self.btn
}]
# js behaviour
self.btn.on_event('click', self._on_click)
def _on_click(self, widget, event, data):
new_item = {
'name': 'Cupcake',
'calories': 305,
'fat': 3.7,
'carbs': 67,
'protein': 4.3,
'iron': '8%',
}
self.items.append(new_item)
return self
toto = CustomData()
toto现在，如果我单击btn，该项将添加到toto.items中，但此更改不会反映在显示中。
如果我想在课外做同样的事情：
new_item = {
'name': 'Cupcake',
'calories': 305,
'fat': 3.7,
'carbs': 67,
'protein': 4.3,
'iron': '8%',
}
toto.items = toto.items + [new_item] 表格会发生变化，我还会看到之前添加的项目。
问题很简单，是什么触发了表的更新？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-07 18:06:54
对于Jupyter Widgets，您必须重新定义.items。如果您追加到items列表，小部件将看不到可变列表已被编辑。所以下面基本上就是你在课外提出的解决方案
class CustomData(v.DataTable):
def __init__(self):
# create a btn to click on
# create the object
super().__init__()
# a header
self.headers = [
{ 'text': 'Dessert (100g serving)', 'value': 'name'},
{ 'text': 'Calories', 'value': 'calories' },
{ 'text': 'Fat (g)', 'value': 'fat' },
{ 'text': 'Carbs (g)', 'value': 'carbs' },
{ 'text': 'Protein (g)', 'value': 'protein' },
{ 'text': 'Iron (%)', 'value': 'iron' },
]
# 3 initial items
self.items = [
{
'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%',
}
]
# add a slot btn
self.btn = v.Btn(children=["click to add item"], color="primary", class_='ma-2')
self.v_slots = [{
'name': 'top',
'children': self.btn
}]
# js behaviour
self.btn.on_event('click', self._on_click)
def _on_click(self, widget, event, data):
new_item = {
'name': 'Cupcake',
'calories': 305,
'fat': 3.7,
'carbs': 67,
'protein': 4.3,
'iron': '8%',
}
# self.items.append(new_item)
self.items = self.items + [new_item]
return self
toto = CustomData()
toto页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66955277
复制相关文章
相似问题
腾讯云开发者
