官网：vxe-table v3https://vxetable.cn/v3/#/table/start/install

下载

npm i -S xe-utils vxe-table@legacy

main.js中引入

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
Vue.prototype.$VXETable = VXETable

示例：

<!--main-->
<template>
  <div class="main">
    <p>
      <vxe-button
        content="点击遮罩层可以关闭"
        @click="
          openAlert({ content: '点击遮罩层可以关闭', maskClosable: true })
        "
      ></vxe-button>
      <vxe-button
        content="按 Escape 键可以关闭"
        @click="
          openAlert({ content: '按 Escape 键可以关闭', escClosable: true })
        "
      ></vxe-button>
      <vxe-button
        content="锁界面不要遮罩层"
        @click="openAlert({ content: '锁界面不要遮罩层', mask: false })"
      ></vxe-button>
      <vxe-button
        content="多窗口、叠加窗口"
        @click="
          openAlert({
            content: '多窗口、叠加窗口（一旦脱离当前实例，需要配合手动关闭）',
            lockView: false,
            mask: false,
          })
        "
      ></vxe-button>
      <vxe-button
        content="允许拖动范围超出屏幕"
        @click="
          openAlert({ content: '允许拖动范围超出屏幕', marginSize: -500 })
        "
      ></vxe-button>
    </p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  props: {},
  created() {},
  mounted() {},
  computed: {},
  methods: {
    openAlert(options) {
      this.$VXETable.modal.alert(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  color: red;
}
</style>

 打印一下VXETable

通用表格

<!--main-->
<template>
  <div class="main">
    <vxe-form :data="formData" @submit="submitEvent">
      <vxe-form-item title="名称" field="name" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.name" placeholder="请输入名称"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="性别" field="sex" :item-render="{}">
        <template #default="{ data }">
          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
            <vxe-option :value="0" label="女"></vxe-option>
            <vxe-option :value="1" label="男"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>

      <vxe-form-item>
        <template #default>
          <vxe-button type="submit" status="primary">查询</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-table
      show-overflow
      row-id="id"
      :loading="isLoading"
      :data="tableData"
      :seq-config="{ seqMethod }"
      :row-config="{ isHover: true }"
      :sort-config="{ multiple: true }"
    >
      <vxe-column type="seq" title="序号" width="90"> </vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age" sortable></vxe-column>

      <vxe-column
        field="sex"
        title="性别"
        :formatter="formatterSex"
        sortable
        :filters="[
          { label: '男', value: 1 },
          { label: '女', value: 0 },
        ]"
        :filter-multiple="false"
      ></vxe-column>
      <vxe-column title="操作" fixed="right">
        <template #default>
          <vxe-button>禁用</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-pager
      :loading="isLoading"
      :current-page="pageInfo.currentPage"
      :page-size="pageInfo.pageSize"
      :page-sizes="[2, 5, 10, 20]"
      :total="pageInfo.pageTotal"
      :layouts="[
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'FullJump',
        'Sizes',
        'Total',
      ]"
      @page-change="handlePageChange"
    >
    </vxe-pager>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      formData: {
        name: "",
        sex: "",
      },
      isLoading: false,
      tableData: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
        pageTotal: 0,
      },
    };
  },
  props: {},
  created() {
    this.findList();
  },
  mounted() {},
  computed: {},
  methods: {
    findList() {
      this.isLoading = true;
      setTimeout(() => {
        const list = [
          {
            id: 10001,
            name: "Test1111111111111111111Test1111111111111111111Test1111111111111111111Test1111111111111111111Test1111111111111111111Test1111111111111111111Test1111111111111111111Test1111111111111111111",
            nickname: "T1",
            role: "Develop",
            sex: 1,
            age: 28,
            address: "Shenzhen",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: 1,
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: 1,
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: 0,
            age: 23,
            address: "Shenzhen",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: 0,
            age: 30,
            address: "Shanghai",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Develop",
            sex: 0,
            age: 27,
            address: "Shanghai",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T1",
            role: "Develop",
            sex: 1,
            age: 28,
            address: "Shenzhen",
          },
          {
            id: 10008,
            name: "Test8",
            nickname: "T2",
            role: "Test",
            sex: 0,
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10009,
            name: "Test9",
            nickname: "T3",
            role: "PM",
            sex: 1,
            age: 32,
            address: "Shanghai",
          },
          {
            id: 100010,
            name: "Test10",
            nickname: "T4",
            role: "Designer",
            sex: 0,
            age: 23,
            address: "Shenzhen",
          },
          {
            id: 100011,
            name: "Test11",
            nickname: "T5",
            role: "PM",
            sex: 0,
            age: 35,
            address: "Shenzhen",
          },
          {
            id: 100012,
            name: "Test12",
            nickname: "T6",
            role: "Designer",
            sex: 1,
            age: 25,
            address: "Shanghai",
          },
          {
            id: 100013,
            name: "Test13",
            nickname: "T9",
            role: "Develop",
            sex: 1,
            age: 33,
            address: "Shenzhen",
          },
          {
            id: 100014,
            name: "Test14",
            nickname: "T6",
            role: "Develop",
            sex: 0,
            age: 21,
            address: "Shanghai",
          },
          {
            id: 100015,
            name: "Test15",
            nickname: "T6",
            role: "Develop",
            sex: 0,
            age: 19,
            address: "Shanghai",
          },
          {
            id: 100016,
            name: "Test16",
            nickname: "T8",
            role: "Develop",
            sex: 1,
            age: 29,
            address: "Shenzhen",
          },
        ];
        this.isLoading = false;
        this.pageInfo.pageTotal = list.length;
        this.tableData = list.slice(
          (this.pageInfo.currentPage - 1) * this.pageInfo.pageSize,
          this.pageInfo.currentPage * this.pageInfo.pageSize
        );
      }, 300);
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pageInfo.currentPage = currentPage;
      this.pageInfo.pageSize = pageSize;
      this.findList();
    },
    formatterSex({ cellValue }) {
      return cellValue === 1 ? "男" : "女";
    },
    seqMethod({ row, seq }) {
      return seq + (this.pageInfo.currentPage - 1) * this.pageInfo.pageSize;
    },
    submitEvent(data) {
      console.log("data:", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  color: red;
}
</style>