如何select v.DataTable中的一个元素？

Question

描述

我尝试创建一个交互式数据表。这个想法是当我点击铅笔时打开一个对话框，并用当前行信息填充对话框。我不知道如何通过单击铅笔来获取此信息，所以我添加了一个额外的 select btn 以了解当前选择的行。

问题我无法select一行... 当我点击任何一个复选框时，它 select 全部。这是一个错误吗？

重现

v.DataTable(
    v_model       = [],
    show_select   = True, 
    single_select = True,
    headers       = headers,
    items         = deserts,
    v_slots       = [
        { # the pencil for modification
            'name'    : 'item.action',
            'variable': 'item',
            'children': v.Icon(small=True, children=['mdi-pencil'])
        }
    ]
)

数据

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' },
    { 'text': 'Action'                , 'value': 'action'}
]

deserts = [
    {
        '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%',
    }
]

编辑

如果我观察 DataTable 的 v_model，我意识到这些值是根据我的需要 select 编辑的，只是显示与 [=30 不匹配=] 行为。

Answer 1

如 #106 of ipyvuetify 中所述，可能有 2 种实现方式：

面向小部件的实现

您只是忘记了 v.DataTable 中的 item_key = 'name' 参数：

v.DataTable(
    v_model       = [],
    show_select   = True, 
    single_select = True,
    item_key      = 'name',
    headers       = headers,
    items         = deserts,
    v_slots       = [
        { # the pencil for modification
            'name'    : 'item.action',
            'variable': 'item',
            'children': v.Icon(small=True, children=['mdi-pencil'])
        }
    ]
)

vuetify 模板版本

要在没有复选框代理的情况下访问项目数据，您可以使用 v.vuetifytemplate 版本：

import ipyvuetify as v
import traitlets

class MyDataTable(v.VuetifyTemplate):
    template = traitlets.Unicode('''
        <template>
            <div>
                <v-data-table
                    v-model="selected"
                    :show-select="true" 
                    :single-select="true"
                    :headers="headers"
                    :items="deserts"
                    item-key="name"
                >
                    <template #item.action="item">
                        <v-btn icon @click="edit_item(item.item)">
                            <v-icon>mdi-pencil<v-icon>
                        </v-btn>
                    </template>

                </v-data-table>
                <v-dialog v-model="open_edit_dialog">
                    <v-card>
                        <v-card-title class="headline">
                            {{ item_to_edit.name }}
                        </v-card-title>
                        <v-card-text>
                            <v-text-field v-model="item_to_edit.calories" label="calories"/>
                        </v-card-text>    
                    </v-card>
                </v-dialog>
            </div>
        </template>
    ''').tag(sync=True)
    
    selected = traitlets.List([]).tag(sync=True)
    headers = traitlets.List([]).tag(sync=True)
    deserts = traitlets.List([]).tag(sync=True)
    
    open_edit_dialog = traitlets.Bool(False).tag(sync=True)
    item_to_edit = traitlets.Dict().tag(sync=True)
    
    def vue_edit_item(self, item):
        self.item_to_edit = item
        self.open_edit_dialog = True

my_data_table = MyDataTable(headers=headers, deserts=deserts)
my_data_table

如何select v.DataTable中的一个元素？

How to select one element in v.DataTable?

python

jupyter

vuetify.js

描述

重现

数据

编辑

面向小部件的实现

vuetify 模板版本