Quick Start

快速接入最小示例

快速开始

下面示例展示如何在页面中直接使用 CuiTable。

<script setup lang="ts">
import { ref } from "vue";
import { CuiTable } from "@eams-monorepo/vue-element-cui";

const rows = ref([
    { name: "固定资产", status: "启用" },
    { name: "库存物料", status: "停用" },
]);

const columns = [
    { prop: "name", label: "名称" },
    { prop: "status", label: "状态" },
];
</script>

<template>
    <CuiTable :data="rows" :columns="columns" />
</template>

如果你使用 unplugin-vue-components，上面的组件导入可以省略：

<script setup lang="ts">
import { ref } from "vue";

const rows = ref([
    { name: "固定资产", status: "启用" },
    { name: "库存物料", status: "停用" },
]);

const columns = [
    { prop: "name", label: "名称" },
    { prop: "status", label: "状态" },
];
</script>

<template>
    <CuiTable :data="rows" :columns="columns" />
</template>

如果你还接入了 unplugin-auto-import 的 vueElementCuiImports / vueElementCuiTypeImports，那么脚本里的 install、version、VueElementCui 以及组件库公开类型也可以按同样方式自动导入。

Installation
安装 @eams-monorepo/vue-element-cui
Migration
从旧文档结构迁移到新站点结构