手机端表格插件，做表格左右滑动

表格数据太长超出屏幕时，需要做左右滑动效果，昨天发现一个插件可以很快实现，不用自己写结构样式，之前自己手写的也可以实现，手机端表格怎么做横向滑动_调调啊的博客-CSDN博客 ， 但发现部署到企业微信之后就滑不动，才另外找的插件来写

vue-easytable 插件官网 ： Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox

一 ，安装插件

npm install vue-easytable

二 ， main.js 中引入

// 引入样式
import "vue-easytable/libs/theme-default/index.css";
// 引入组件库
import VueEasytable from "vue-easytable";

Vue.use(VueEasytable);

三 ， 页面中使用 (用的vant组件库，加了list列表上拉加载)

表格宽度是根据数据长短自适应的，所以当数据太长超出屏幕，会自动实现左右滑动，不用再写别的代码

columms数组中的 field 是后端返回的数据对应字段，title是表头的标题， key是随便写的，不要重复就行

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ve-table
          is-horizontal-resize
          style="width: 100%"
          :columns="columns"
          :table-data="list"
          :fixed-header="true"
        ></ve-table>
      </van-list>


//引入获取表格数据的api方法
import {getData} from "@/api";


created() {
    this.loadData();
 },



data(){

      list: [],
      pageSize: 10,
      pageNo: 1,
      loading: true,
      finished: false,
      total: "",
      columns: [
        {
          field: "RcvPymtPs_AccNo",
          title: "机构名称",
          key: "a",
          fixed: "left" // 这一列固定
        },
        {
          field: "Rptt_Atch_ID",
          title: "余额",
          key: "b",
        },
        {
          field: "IncrrptGvrnmntNsCmtTm",
          title: "比上日新增",
          key: "c",
        },
        {
          field: "Mnplt_Psn_Nm",
          title: "比上月新增",
          key: "d",
        },
        {
          field: "LglRprsAndESHnChgCmnt",
          title: "比上季度新增",
          key: "e",
        },
        {
          field: "LGnt_Wrnt_Nm",
          title: "比年初新增",
          key: "f",
        },
      ]

}


    // 获取表格数据
    async loadData() {
      const { data: result } = await getData({
       pageSize：this.pageSize,
       pageNo:this.pageNo
      });

      console.log(result);
      let rows = result.list;
      this.loading = false;
      this.total = result.count;
      if (rows == null || rows.length === 0) {
        // 加载结束
        this.loading = false;
        this.finished = true;
        return;
      }

      this.list = this.list.concat(rows);
      console.log(this.list);
      if (this.list.length >= this.total) {
        this.finished = true;
      }
    },
    onLoad() {
      this.pageNo += 1;
      this.loadData();
    },

如果样式有问题，css加入这行代码，把表格宽度调宽 

/deep/ .ve-table-content-wrapper {
  width: 21.33rem;
}

/deep/ .ve-table-header-th {

  width: 2.83rem;

}