Vue封装滚动表格组件

目录

1、LjSwiperTable

2、LjTableScroll

3、基于el-table封装

4、LjItemScroll

---

参考：https://blog.csdn.net/fang156239305/article/details/112802732

1、LjSwiperTable

优势：

1. 可以手动拖动
2. 点击行可以获取当前行所有信息。点击当前行任意位置都可以
3. 可以自动循环滚动。可以一次滚动一行，也可一次滚动多行

总结：可以点击item查看详情时，推荐使用

使用：

<template>
    <div>
      <LjSwiperTable
        style="width: 602px"
        ref="swiperTable"
        :tableData="tableData"
        :titles="['日期', '姓名', '地址']"
        :widths="['150px', '150px', '300px']"
        :hasStripe="true"
        contentHeight="250px"
        align="center"
        :showHeader="true"
        rowLineHeight="50px"
        rowColor="white"
        headStyle="color:white;height:40px;lineHeight:40px;borderBottom:1px solid white;fontSize:18px;"
        :swiperOption="swiperOption"
        @change="handleClickSwiperTable"
        @mouseover.native="$refs.swiperTable.swiperStop()"
        @mouseleave.native="$refs.swiperTable.swiperStart()"
      ></LjSwiperTable>
    </div>
</template>

<script>
import LjSwiperTable from "@/components/LjSwiperTable/index.vue";
export default {
  name: "LjTableScroll",
  components: { LjSwiperTable },
  props: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-05",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      swiperOption: {
        loop: false, //首尾循环
        direction: "vertical",
        spaceBetween: 0, //板块间隔
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false, //true表示滚动到最后一页后停止滚动
          autoplayDisableOnInteraction: false,
          disableOnInteraction: false, //false:交互后，还是可以继续滚动。
          //当disableOnInteraction设为false，交互后却不滚动，则考虑loop为true时，是否slidesPerView属性值小于了板块数量。如果小于，则不会滚动。
          //因此建议loop设为false,disableOnInteraction设为false。此时就不用考虑slidesPerView的值是否小于板块值了。
        },
        slidesPerView: "auto", //一定要用auto
        autoHeight: true, //一定要用true
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {
    handleClickSwiperTable(e) {
      let {
        item: { name, date, address },
      } = e;
      this.$message(`${date},${name},${address}`);
    },
  },
  watch: {},
};
</script>

首先安装vue-awesome-swiper，一定要加@3，如下：

cnpm i -S vue-awesome-swiper@3

LjSwiperTable/index.vue:

<template>
  <div class="LjSwiperTable">
    <div class="table-header" :style="headStyle" v-if="showHeader">
      <span
        v-for="(item, i) in widths"
        :key="i"
        :style="{ width: widths[i], textAlign: align }"
        >{
  { titles[i] }}</span
      >
    </div>
    <div :style="{ height: contentHeight }">
      <swiper class="swiper" :options="swiperOption" ref="myBotSwiper">
        <swiper-slide v-for="(item, index) in tableData" :key="index">
          <div
            :class="{ stripe: hasStripe ? index % 2 === 1 : false }"
            @click="handleRowClick(item, index)"
            :style="{ height: rowLineHeight, color: rowColor }"
            style="cursor: pointer"
          >
            <span
              v-for="(value, key, i) in item"
              :key="key"
              :style="{
                width: widths[i],
                lineHeight: rowLineHeight,
                textAlign: align,
              }"
            >
              {
  { value }}
            </span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "LjSwiperTable",
  components: {
    swiper,
    swiperSlide,
  },
  props: {
    // 传入的表格数据
    tableData: {
      type: Array,
      default: () => [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-05",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06&