Common Components
On this page

可编辑表格 ​

基础用法 ​

javascript
import { ref } from "vue";
import dayjs from "dayjs";
import { requestPosts } from "../../mock";
import { faker } from "@faker-js/faker";

const dataSource = ref([]);

const columns = [
  { title: "Id", dataIndex: "id", ellipsis: true, width: 100 },
  { title: "Create At", dataIndex: "createdAt", sorter: true, ellipsis: true, width: 100 },
  { title: "Update At", dataIndex: "updatedAt", ellipsis: true, width: 100 }
  // { title: "Level", dataIndex: "level", ellipsis: true, width: 100 }
];

async function requestDataSource() {
  const data = await requestPosts(1, 20);
  data.data.forEach((item) => {
    item.createdAt = dayjs(item.createdAt);
    item.updatedAt = dayjs(item.updatedAt);
  });
  dataSource.value = data.data;
}

requestDataSource();

function handleChangeTime() {
  dataSource.value.forEach((item) => {
    item.createdAt = dayjs(faker.date.past());
    item.updatedAt = dayjs(faker.date.future());
  });
}
html
<template>
  <n-button @click="handleChangeTime">change</n-button>
  <n-gantt-table
    ref="editableTableRef"
    size="small"
    row-key="id"
    :bars="{ startKey: 'createdAt', endKey: 'updatedAt' }"
    :data-source="dataSource"
    :columns="columns"
    :pagination="false"
    :row-selection="{}"
    bordered
    :resize="true"
  >
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'createdAt'">{{
        record.createdAt.format("YYYY-MM-DD")
      }}</template>
      <template v-if="column.dataIndex === 'updatedAt'">{{
        record.updatedAt.format("YYYY-MM-DD")
      }}</template>
    </template>
  </n-gantt-table>
</template>