需求:实现 鼠标hover 某行,该行显示 编辑按钮
<v-data-table
ref='table'
headers={this.headers}
items={this.items}
options={this.pagination}
loading={this.fetch_items_loading}
serverItemsLength={this.apiPaging.totalSize}
must-sort
{...{ on: listeners }}
footer-props={{
showFirstLastPage: false,
itemsPerPageOptions: [20, 50, 100, -1]
}}
// @update:options="handlePagination"
scopedSlots={{
...this.defaultScopedSlots,
'item.name': (props) => {
return (
<v-hover scopedSlots={{
'default': function({ hover }) {
return (
<div>
{props.value}
<div>
{
hover &&
<span>
<v-btn x-small text color='primary' outlined={that.actionRow === props.item} onClick={() => that.toggleDrawer('action1', props.item)}>Action1</v-btn>
<v-btn x-small text color='primary' outlined={that.actionRow === props.item} onClick={() => that.toggleDrawer('action2', props.item)}>Action2</v-btn>
</span>
}
</div>
</div>
)
}
}}>
</v-hover>
)
},
'item.action1': function(props) {
return <v-btn text color='primary' outlined={that.actionRow === props.item} onClick={() => that.toggleDrawer('action1', props.item)}>Action1</v-btn>
},
'item.action2': function(props) {
return <v-btn text color='primary' outlined={that.actionRow === props.item} onClick={() => that.toggleDrawer('action2', props.item)}>Action2</v-btn>
}
}}>
</v-data-table>