如何在v.DataTable中选择一个元素？

Question

描述

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

问题我无法选择一行。。。 当我点击任何一个复选框时，它会将它们全部选中。是虫子吗

复制

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，我意识到这些值是根据我的需要选择的，只是显示与vuetify.js行为不匹配

Answer 1

如#106 of ipyvuetify2中所述，实现是可能的：

面向小部件的实现

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

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