Krco

基于 Arco Design Vue 的配置化表格和表单组件库，提供开箱即用的高阶功能，支持 TypeScript 类型提示，帮助快速构建后台管理系统。

特性

• 🚀 配置化驱动：通过简单的配置即可生成复杂的表单和表格
• 💪 完整的类型支持：使用 TypeScript 编写，提供完整的类型定义
• 🎨 基于 Arco Design：继承 Arco Design 的设计风格，提供统一的用户体验
• 📦 开箱即用：提供丰富的组件和完整的文档

安装

# pnpm
pnpm add krco

# npm
npm install krco

# yarn
yarn add krco

快速开始

1. 引入组件

// 1. 引入 Arco Design Vue
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'

// 2. 引入 krco
import krco from krco
import "krco/es/style.css"

// 3. 注册组件
app.use(ArcoVue)
app.use(krco)

// 4. (可选) 如需使用图标，请安装并注册图标组件
import ArcoVueIcon from '@arco-design/web-vue/es/icon'
app.use(ArcoVueIcon)

组件

FormPlus 表单组件

通过配置快速生成表单，支持多种表单项类型和验证规则。

<template>
  <a-form-plus v-model="form" :option="option" />
</template>

<script setup lang="ts">
import type { Option } from "krco"

const form = ref({
  name: "张三",
  age: 18
})

const option = reactive<Option>({
  columns: [
    {
      label: "姓名",
      field: "name",
      type: "input", // 输入框类型
      required: true, // 必填
    },
    {
      label: "年龄",
      field: "age",
      type: "number", // 数字输入框
      min: 0,
      max: 100
    }
  ]
})
</script>

TablePlus 表格组件

配置化的表格组件，支持搜索、排序、分页等功能。

<template>
  <a-table-plus
    v-model="form"
    v-model:page="page"
    :option="option"
    :data="data"
  />
</template>

<script setup lang="ts">
import type { TableOption } from "krco"

const page = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 10
})

const form = ref({})

const data = [
  { name: '李四', age: 20, sex: '女' },
  { name: '王五', age: 22, sex: '男' },
  { name: '赵六', age: 24, sex: '女' }
]

const option: TableOption = {
  columns: [
    {
      label: '姓名',
      field: 'name',
      search: true, // 开启搜索
    },
    {
      label: '年龄',
      field: 'age',
      sortable: true, // 开启排序
    },
    {
      label: '性别',
      field: 'sex',
      filter: true, // 开启筛选
    }
  ]
}
</script>

API 文档

FormPlus Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | v-model | 表单数据对象 | object | - | | option | 表单配置项 | Option | - | | loading | 加载状态 | boolean | false |

TablePlus Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 表格数据 | array | [] | | option | 表格配置项 | TableOption | - | | v-model:page | 分页信息 | object | - | | loading | 加载状态 | boolean | false |

更多 API 和配置项请参考 完整文档

注意事项

1. 依赖要求： 确保项目中已安装 Vue 3.4.0 或更高版本。 需要配合 Arco Design Vue 使用。
2. 样式文件： 必须引入krco/es/style.css 确保组件样式生效。
3. TypeScript： 组件库提供完整的类型声明，支持类型安全开发。

许可证

MIT License