Antd List An actionable virtual List component

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Infinite long virtual list component, improved rendering performance, simple text prompt bubble box, and customizable action bar, to meet personalized needs

preface

The Ant Design Vue Transfer Shuttle box “Make the Wheel” implements a virtual list.

This implementation is a virtual list component with operation, combined with vue-virtual-Scroller to realize rolling load infinite long list, with virtualization function, can improve the performance of long list when the data volume is large.

implementation

Ant Design List website: antdv.com/components/…

Main function points:

1. RecycleScrollerPlug-in use: virtual scrolling
2. Selected and unselected styles: item, item-selected
3. Title processing (Tooltip) : Over length ellipsis, text prompt bubble box
4. Action bar processing (Dropdown) : You can customize the operation item

Note:

1. color: currentColor; : inherits the color attribute of the parent element. I’m using it to deal with selected styles

   DN Web Docs Color

2. writing-mode: vertical-rl; : defines the horizontal or vertical arrangement of text and the direction of text travel in block-level elements. I mainly use it to align the three points vertically.

   MDN Web Docs writing-mode

use

documentation

The default operations are edit and delete, which can be customized by users

<m-rank-list
  :data-source="list"
  :active-key="activeKey"
  @handle-select="handleSelect"
>// Customize the action bar contents<template slot="operation">
    <a-menu-item>The new staff</a-menu-item>
    <a-menu-item>The editor</a-menu-item>
    <a-menu-item>delete</a-menu-item>
  </template>
</m-rank-list>
Copy the code

The complete code

Tip: This component is developed based on the Ant Design List. If you want to use it, make sure you have Ant Design Vue installed on your system. My component library version is V1.6.2

<template>
  <a-list class="list">
    <RecycleScroller
      class="recycle"
      :items="dataList"
      :item-size="32"
      key-field="name"
    >
      <a-list-item
        slot-scope="{ item }"
        :key="item.id"
        :class="['item', { 'item-selected': activeId === item.id }]"
        @click="handleSelect(item)"
      >
        <rank-icon class="item-icon" />// Tooltip text prompt<a-tooltip placement="topLeft" :title="item.name">
          <div class="item-title">{{ item.name }}</div>- tooltip < / a > '<! -- Dropdown menu -->
        <a-dropdown
          placement="bottomRight"
          :trigger="['hover']"
          class="item-dropdown"
        >
          <span>.</span>
          <a-menu slot="overlay">
            <slot name="operation">
              <a-menu-item @click="handleEdit(item)">The editor</a-menu-item>
              <a-menu-item @click="handleDel(item)">delete</a-menu-item>
            </slot>
          </a-menu>
        </a-dropdown>
      </a-list-item>
    </RecycleScroller>
  </a-list>
</template>

<script>
  import * as R from "ramda";
  import { RecycleScroller } from "vue-virtual-scroller";
  import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
  export default {
    props: ["dataSource"."activeKey"].data() {
      return {
        activeId: "".dataList: [],}; },components: {
      RecycleScroller,
    },
    watch: {
      dataSource(val) {
        if(val? .length) {this.dataList = R.clone(val);
          this.activeId = this.activeKey
            ? this.activeKey
            : this.dataList? .0]? .id; }else {
          this.dataList = [];
          this.activeId = ""; }}},methods: {
      handleSelect(item) {
        this.activeId = item.id;
        this.$emit("handle-select", item);
      },
      handleEdit(item) {
        this.$emit("handle-edit", item);
      },
      handleDel(id) {
        this.$emit("handle-delete", item); ,}}};</script>

<style lang="scss" scoped>
  .list {
    .recycle {
      max-height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
      margin-bottom: 24px;
    }
    .item {
      display: flex;
      align-items: center;
      height: 32px;
      padding: 0 0 0 4px;
      border-bottom: 0;
      cursor: pointer; // Select style &-selected {background-color: #e6f7ff;
        color: #1890ff;
        .item-icon..item-dropdown{// Inherit colorcolor: currentColor; & -}}icon {
        font-size: 12px;
        margin-right: 6px;
        color: #ebedf0;
      }
      &-title {
        flex: 1;
        display: block; // Over length ellipsisoverflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &-dropdown {
        cursor: pointer; // specify block flow direction writing-mode: vertical-rl;color: #ebedf0;
        font-weight: bold; }}}</style>
Copy the code