在「Vue3」中使用「字节」推出的高性能表格组件「VTable」

pnpm install @visactor/vtable
复制

(base) adamhuan@Leviathan src % pnpm list | grep vtable
@visactor/vtable 1.5.3
@visactor/vtable-export 1.5.3
(base) adamhuan@Leviathan src % 
复制

<template>
  这是「VisActor  VTable」表格功能的演示
  <div ref="listTableRef" style="width: 1280px; height: 400px"></div>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { ListTable } from "@visactor/vtable";


const listTableRef = ref();


const records = [
  {
    1: "李一桐",
    2: "女",
    3: 33,
    4: "处女座",
    5: "1990-09-06",
    6: "山东省济南市",
    7: "北京舞蹈学院",
  },
  {
    1: "赵露思",
    2: "女",
    3: 25,
    4: "天蝎座",
    5: "1998-11-09",
    6: "四川省成都市",
    7: "明道大学",
  },
  {
    1: "包上恩",
    2: "女",
    3: 22,
    4: "双子座",
    5: "2002-05-23",
    6: "广东省深圳市",
    7: "浙江传媒学院表演系",
  },
];


const columns = [
  {
    field: "1",
    title: "姓名",
    width: "auto",
  },
  {
    field: "2",
    title: "性别",
    width: "auto",
  },
  {
    field: "3",
    title: "年龄",
    width: "auto",
  },
  {
    field: "4",
    title: "星座",
    width: "auto",
  },
  {
    field: "5",
    title: "生日",
    width: "auto",
  },
  {
    field: "6",
    title: "出生地",
    width: "auto",
  },
  {
    field: "7",
    title: "毕业院校",
    width: "auto",
  },
];


const option = {
  records,
  columns,
  widthMode: "standard",
};


onMounted(() => {
  const listTable = new ListTable(listTableRef.value, option);


  listTable.on("click_cell", (params) => {
    console.log(params);
  });
});
</script>


<style scoped>
</style>
复制