noob-components/examples/view/base/table-v2.vue

<template>
  <SearchRow :title="t('table.title') + ' (V2)'">
    <template #default>
      <NoobInput v-model="example.aaa" :width="180"></NoobInput>
      <NoobSelect v-model="example.bbb" dict="test"></NoobSelect>
      <NoobSelect v-model="example.ccc" stateProp="test" :width="120"></NoobSelect>
    </template>
  </SearchRow>
  <ListTableV2
    :data="data"
    :columns="columns"
    :page="true"
    :border="true"
    :example="example"
    :row-key="'id'"
    @query="handleQuery"
    debug
  ></ListTableV2>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { ListTableV2, SearchRow, NoobInput, NoobSelect, Infomation } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
import { LoremIpsum } from "lorem-ipsum";

const { state } = useStore();
const { t } = useI18n();

const example = reactive({
  page: 1,
  size: 10,
  aaa: "",
  bbb: "b",
  ccc: "c",
});

// Generate 100 rows of data across multiple pages
const generateData = () => {
  const rows: Array<Record<string, any>> = [];
  const now = Math.floor(Date.now() / 1000); // Unix timestamp in seconds
  const lorem = new LoremIpsum({ sentencesPerParagraph: { min: 2, max: 5 }, wordsPerSentence: { min: 5, max: 20 } });
  for (let i = 1; i <= 100; i++) {
    rows.push({
      id: i,
      caseName: `案件${i}`,
      taskName: `任务${i}`,
      userId: `user${i}`,
      content: lorem.generateParagraphs(1),
      createTime: now - i * 60, // timestamps in seconds
    });
  }
  return rows;
};

const allData = generateData();

const data = reactive({
  data: allData.slice(0, 10),
  total: allData.length,
});

const columns = [
  {
    key: "id",
    name: "ID",
  },
  {
    key: "caseName",
    i18n: "table.props.0",
  },
  {
    key: "taskName",
    i18n: "table.props.1",
  },
  {
    key: "userId",
    i18n: "table.props.2",
  },
  {
    key: "content",
    i18n: "table.props.3",
  },
  {
    key: "createTime",
    i18n: "table.props.4",
    timestamp: "unix",
  },
];

const handleQuery = () => {
  // Simulate pagination - slice data based on page and size
  const start = (example.page - 1) * example.size;
  const end = start + example.size;
  data.data = allData.slice(start, end);
  console.log("Query:", example.page, example.size, "showing", start, "-", end);
};

onMounted(() => {
  console.log("Table V2 mounted");
});
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>