preface

In terms of large screen data visualization, we often use table components, which are encapsulated this time without pagination. For long list tables, we use the form of scrolling round to scroll down to display table data. Component page scrolling is implemented based on vue-awes-swiper secondary encapsulation.

1. Install the third-party package

You are advised to use CNPM or YARN to install packages. Otherwise, the speed is slow

npm install swiper vue-awesome-swiper -S
Copy the code

2. Introduce vue-awes-swiper

  • Introduce related third-party components in main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; . Vue.use(VueAwesomeSwiper);Copy the code

3. Table component encapsulation

  • Creating a Component File

  • Defines the properties passed in by the component

  • Data for the component defined
    1. CurrentActiveRow Specifies the number of selected rows in the current component table
    2. SwiperOption Defines scroll wheel parameters. For details, see vue-awes-swiper
data() {
    return {
      currentActiveRow: 0,
      swiperOption: {
        autoHeight: true,
        direction: 'vertical',
        spaceBetween: 0,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false
        },
        slidesPerView: 'auto',
        grabCursor: true,
        autoplayDisableOnInteraction: false,
        mousewheelControl: true
      }
    };
  },
Copy the code
  • Template page writing
<template>
  <div
    class="table-wrapper"
    :style="{
      width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`,
      height: `calc(${contentHeight} + 48px)`
    }"
  >
    <div class="table-header" v-if="showHeader">
      <span v-for="(it, i) in widths" :key="i" :style="{ width: widths[i] }">{{ titles[i] }}</span>
    </div>
    <div class="table-content" :style="{ height: contentHeight }">
      <swiper class="swiper" :options="swiperOption" ref="myBotSwiper">
        <swiper-slide v-for="(it, i) in dataList" :key="i">
          <div
            class="table-row"
            :class="{ stripe: i % 2 === 1, active: i === currentActiveRow }"
            @click="handleRowClick(it, i)"
            :style="{ height: tabelHeight }"
          >
            <span
              v-for="(ite, ind) in widths"
              :key="ind"
              :title="it[ind]"
              :style="{ width: widths[ind], height: tabelHeight }"
              >{{ it[ind] }}</span
            >
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
Copy the code

4. Click listening of the table component

  • The change event is passed to the parent component, which is triggered by clicking within the component
  • If you need to click on a table row without scrolling, call the swiperStop method accordingly. SwiperStart Starts from the current scroll
methods: { handleRowClick(it, i) { this.currentActiveRow = i; const currentIt = this.data[i]; this.$emit('change', currentIt); } / / control table stop rolling swiperStop () {this. MyBotSwiper. The autoplay. Stop (); } / / control form began to rolling swiperStart () {this. MyBotSwiper. The autoplay. Start (); }},Copy the code

5. Examples of how to use components

6. Component complete code

<template> <div class="table-wrapper" :style="{ width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`, height: `calc(${contentHeight} + 48px)` }" > <div class="table-header" v-if="showHeader"> <span v-for="(it, i) in widths" :key="i" :style="{ width: widths[i] }">{{ titles[i] }}</span> </div> <div class="table-content" :style="{ height: contentHeight }"> <swiper class="swiper" :options="swiperOption" ref="myBotSwiper"> <swiper-slide v-for="(it, i) in dataList" :key="i"> <div class="table-row" :class="{ stripe: i % 2 === 1, active: i === currentActiveRow }" @click="handleRowClick(it, i)" :style="{ height: tabelHeight }" > <span v-for="(ite, ind) in widths" :key="ind" :title="it[ind]" :style="{ width: widths[ind], height: tabelHeight }" >{{ it[ind] }}</span > </div> </swiper-slide> </swiper> </div> </div> </template> <script> export default {name: 'swiper-table', props: {// Pass table data: {type: Array, default: () = > [[' throw 'weeds,' 2020.08.23 12:26:15 'and' total factor grids', 'public security traffic police', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15', 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li provinces']. [' throw 'weeds,' 2020.08.23 12:26:15 'and' total factor grids', 'public security traffic police', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids', 'public security traffic police', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' throw weeds, '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police, 'environmental protection', 'to', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' throw weeds, '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police, 'environmental protection', 'to', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' throw weeds, '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police, 'environmental protection', 'to', 'nian li province], [' weeds throw', '2020.08.23 12:26:15' and 'total factor grids',' public security traffic police ', 'environmental protection', 'to accept', 'nian li province]]}, / / incoming form head titles: {type: Array, default: () = > [' event title ', 'creation time', 'sources',' classification ', 'status',' reported people]}, / / table columns wide widths: {type: Array, default: () => ['246px', '348px', '224px', '214px', '214px', '214px']}, // Table height contentHeight: {type: ShowHeader: {type: Boolean, default: true}, // tabelHeight: {type: String, default: '36px' } }, computed: { myBotSwiper() { return this.$refs.myBotSwiper.$swiper; } }, data() { return { currentActiveRow: 0, swiperOption: { autoHeight: true, direction: 'vertical', spaceBetween: 0, autoplay: { delay: 2500, disableOnInteraction: false, autoplayDisableOnInteraction: false }, slidesPerView: 'auto', grabCursor: true, autoplayDisableOnInteraction: false, mousewheelControl: true } }; }, methods: { handleRowClick(it, i) { this.currentActiveRow = i; const currentIt = this.data[i]; this.$emit('change', currentIt); } / / control table stop rolling swiperStop () {this. MyBotSwiper. The autoplay. Stop (); } / / control form began to rolling swiperStart () {this. MyBotSwiper. The autoplay. Start (); } }, watch: { data() { this.currentActiveRow = 0; }}}; </script> <style lang="scss" scoped> .table-wrapper { width: 100%; height: 497px; span { box-sizing: border-box; } .table-header { $height: 31px; width: 100%; height: $height; span { color: #83c2ee; // BACKGROUND: rgba(255, 255, 255, 0.12); background-color: #013558; font-size: 19px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: rgba(131, 194, 238, 1); line-height: $height; &:nth-child(2) { text-align: center; } } span + span { margin-left: 2px; } } .table-content { width: 100%; height: 284px; margin-top: 2px; .swiper { width: 100%; height: 100%; .table-row { width: 100%; height: 36px; cursor: pointer; &.active { span { color: rgba(131, 194, 238, 1); font-size: 17px; font-weight: bold; }} &.stripe span {background: rgba(255, 255, 255, 0.06); } span { font-size: 17px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; Color: rgba(255, 255, 255, 0.85); line-height: 36px; } span + span { margin-left: 2px; } } } } span { height: 100%; line-height: 100%; display: inline-block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; &:nth-child(1) { width: 246px; } &:nth-child(2) { width: 348px; padding-left: 13px; } &:nth-child(3) { width: 214px; } &:nth-child(4) { width: 214px; } &:nth-child(5) { width: 214px; } } } </style>Copy the code

Code word is not easy, welcome to criticize guidance, learn from each other. Give it a thumbs up if you feel good.