Table

<template>
  <div>
    <Table :createOption="tableOption" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateTable } from "fast-crud";

const tableOption = CreateTable({
  api: "list",
  autoRun: true,
  column: [
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "tag",
      label: "标签",
    },
  ],
});
</script>

<template>
  <div>
    <Table :createOption="tableOption" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateTable } from "fast-crud";

const tableOption = CreateTable({
  api: "user.list",
  autoRun: true,
  column: [
    {
      type: "Index",
      prop: "type",
      label: "排序",
    },
    {
      prop: "type",
      label: "爱好",
    },
    {
      prop: "age",
      label: "年龄",
      render(text, data, index) {
        return (
          <el-button
            type="success"
            onClick={() => {
              alert(text + index);
            }}
          >
            click
          </el-button>
        );
      },
    },
  ],
});
</script>

<template>
  <div>
    <Table :createOption="tableOption" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateTable } from "fast-crud";

const tableOption = CreateTable({
  api: "user.list",
  autoRun: true,
  column: [
    {
      type: "Index",
      prop: "type",
      label: "排序",
    },
  ],
});
</script>

<template>
  <div>
    <Table :createOption="tableOption" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateTable } from "fast-crud";

const tableOption = CreateTable({
  api: "list",
  autoRun: true,
  column: [
    {
      type: "Tag",
      prop: ["tag", "des"],
      label: "标签",
    },
  ],
});
</script>

<template>
  <div>
    <Table :createOption="tableOption" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateTable } from "fast-crud";

const tableOption = CreateTable({
  api: "list",
  autoRun: true,
  column: [
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "tag",
      label: "标签",
      vIf() {
        return false;
      },
    },
    {
      prop: "des",
      label: "标签",
    },
  ],
});
</script>

<template>
  <div>
    <Table :createOption="tableOption" />
  </div>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { CreateTable } from "fast-crud";

const tableOption = CreateTable({
  api: "list",
  autoRun: true,
  formatRowText(text) {
    if (text === undefined) {
      return "-";
    }
  },
  column: [
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "birth",
      label: "出生日期",
    },
    {
      prop: "age",
      label: "年龄",
    },
  ],
});
</script>