我有一个 Vuetify 数据表

             <v-data-table 
                :headers="headers" 
                :items="members" 
                item-key="id" 
                v-model="selected" 
                :search="search" 
              > 
                <template slot="items" slot-scope="props"> 
                  <tr :active="props.selected" @click="select(props.item)"> 
                    <td>{{ props.item.name }}</td> 
                    <td class="text-xs-right">{{ props.item.FirstName}}</td> 
                    <td class="text-xs-right">{{ props.item.LastName }}</td> 
                    <td class="text-xs-right">{{ props.item.email }}</td> 
                    <td class="text-xs-right">{{ props.item.department}}</td> 
                    <td class="text-xs-right">{{ props.item.division}}</td> 
                  </tr> 
                </template> 

当我选择一行时,我希望能够在同一页面上填充一个项目,其中包含一些数据,例如 v-card 中的姓名和电子邮件。我目前有
{{消息}}

在我的脚本中我有
         return { 
         msg: "", 

然后
       select(selectedItem) { 
  this.selected = []; 
  this.members.forEach(item => { 
    if (item.id == selectedItem.id) { 
      this.selected.push(item); 
      this.msg = selectedItem.FirstName; 
    } 
  }); 
}, 

我需要将名称放入消息中。我觉得我正在走很长的路来获取我的数据,并且想知道是否有人有更好的解决方案。感谢您的支持。

请您参考如下方法:

<v-data-table @click:row="rowClick" item-key="name" single-select ... 
 
methods: { 
    rowClick: function (item, row) {       
      row.select(true); 
      //item  - selected item 
    } 
} 
 
<style> 
  tr.v-data-table__selected { 
    background: #7d92f5 !important; 
  } 
</style> 

或者
<style scoped> 
  /deep/ tr.v-data-table__selected { 
    background: #7d92f5 !important; 
  } 
</style> 

例子
https://codepen.io/nicolai-nikolai/pen/GRgLpNY


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!