[vuetify] v-hover-组件

130 阅读1分钟

需求:实现 鼠标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>