@lllgn/arco-crud v0.0.53

介绍

arco-crud 是基于现有的 arco-design 库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对 table 表格和 form 表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易.

浏览器兼容性

支持所有符合 ES5 标准的浏览器(不支持 IE8 及以下版本）.

安装

通过 npm 安装

# 安装
npm  i @lllgn/arco-crud -S

# 引入
import ArcoCrud from '@lllgn/arco-crud';
// 引入CRUD样式
import '@lllgn/arco-crud/dist/style.css';
Vue.use(ArcoCrud);

Example

<template>
  <div>
    <arco-crud
      :loading="loading"
      :option="option"
      :columns="columns"
      :table-data="tableData"
      @refresh="onRefresh"
      @row-update="onUpdate"
      @row-save="onSave"
      @row-del="onDel"
    >
      <template #roadSearch>
        <a-button type="primary">插槽1</a-button>
      </template>
    </arco-crud>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";

// 声明表单对象
const searchFormRef = ref(null);

const datas = reactive<{
  // 加载状态
  loading: boolean;
  // 加载状态
  option: any;
  // crud列表项
  columns: Array<any>;
  // 表格数据
  tableData: Array<any>;
}>({
  loading: false,
  option: {},
  columns: [
    {
      label: "姓名",
      prop: "name",
      fixed: "left",
      width: 140,
      type: "input",
      searchFormShow: true,
      formItemWidth: "500px",
      showWordLimit: true,
      placeholder: "请输入姓名",
      rules: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      maxLength: 10,
    },
    {
      label: "用户信息",
      children: [
        {
          label: "生日",
          prop: "birthday",
        },
        {
          label: "性别",
          prop: "sex",
          type: "radio",
          radioType: "button",
          width: 140,
          formItemWidth: "none",
          showWordLimit: true,
          dictData: [
            {
              label: "男",
              value: "1",
            },
            {
              label: "女",
              value: "0",
            },
            {
              label: "未知",
              value: "2",
            },
          ],
        },
        {
          label: "爱好",
          prop: "hobby",
          type: "select",
          width: 140,
          showWordLimit: true,
          dictData: [
            {
              label: "足球",
              value: "1",
            },
            {
              label: "舞蹈",
              value: "0",
            },
            {
              label: "音乐",
              value: "2",
            },
          ],
        },
        {
          label: "地址",
          children: [
            {
              label: "城市",
            },
            {
              label: "街道",
              prop: "road",
            },
            {
              label: "门牌",
              prop: "no",
            },
          ],
        },
        {
          label: "街道",
          prop: "road",
          type: "input",
          searchFormShow: true,
          searchSlot: true,
        },
      ],
    },
    {
      label: "信息",
      children: [
        {
          label: "电子邮箱",
          prop: "email",
        },
        {
          label: "电话",
          prop: "phone",
        },
      ],
    },
    {
      label: "薪资",
      type: "input",
      prop: "salary",
      width: 120,
      formItemWidth: "300px",
    },
  ],
  tableData: [
    {
      key: "1",
      name: "Jane Doe",
      salary: 2300,
      birthday: "1994-04-21",
      city: "London",
      road: "Park",
      hobby: "1",
      sex: "1",
      no: "34",
      phone: "12345678",
      email: "jane.doe@example.com",
    },
    {
      key: "2",
      name: "Alisa Ross",
      salary: 2500,
      birthday: "1994-05-21",
      city: "London",
      road: "Park",
      sex: "0",
      hobby: "0",
      no: "37",
      phone: "12345678",
      email: "alisa.ross@example.com",
    },
    {
      key: "3",
      name: "Kevin Sandra",
      salary: 2200,
      birthday: "1992-02-11",
      city: "Paris",
      road: "Arco",
      sex: "0",
      hobby: "0",
      no: "67",
      phone: "12345678",
      email: "kevin.sandra@example.com",
    },
    {
      key: "4",
      name: "Ed Hellen",
      salary: 1700,
      birthday: "1991-06-21",
      city: "London",
      road: "Park",
      no: "317",
      sex: "1",
      hobby: "1",
      phone: "12345678",
      email: "ed.hellen@example.com",
    },
    {
      key: "5",
      name: "William Smith",
      salary: 2700,
      birthday: "1996-08-21",
      city: "Paris",
      road: "Park",
      sex: "1",
      no: "114",
      phone: "12345678",
      email: "william.smith@example.com",
    },
  ],
});
// 抛出数据到渲染层
const { loading, option, columns, tableData } = toRefs(datas);

// 保存
const onSave = (done: any, row: any) => {
  setTimeout(() => {
    done();
  }, 2000);
};

// 删除
const onDel = (done: any, row: any) => {
  setTimeout(() => {
    done();
  }, 2000);
};
// 更新
const onUpdate = (done: any, row: any) => {
  setTimeout(() => {
    done();
  }, 2000);
};

// 刷新
const onRefresh = () => {};
</script>

API

Props

CrudProp (CRUD属性)

CrudOption (CRUD配置)

CrudColumnsOption extends FormColumns （CRUD项配置继承自FormColumns）

FormColumns (表单项配置)

FormOptions (表单配置)

DictProps (字典属性)

Record (Record属性)

Event(事件)

Crud Event

Slots(插槽)

Crud Slots

License

Ths project is MIT licensed.