easy-arco-table

Quickly build a table page with arco design.

中文文档

Quick Start

npm install easy-arco-table

Usage

<template>
 <easyArcoTable
    ref="tablePageRef"
    :columns="columnsTable"
    :methods="sortMethods"
    :api="getGoodsList"
 />
</template>

<script lang='ts' setup>
    import easyArcoTable from 'easy-arco-table';
    import { getGoodsList } from 'your api path'
     const goodsType = [
        {
            value: 'PHYSICAL_GOODS',
            label: '实物商品',
            color: 'blue',
        },
        {
            value: 'VIRTUAL_GOODS',
            label: '虚拟商品',
            color: 'purple',
        },
    ];

     const columnsTable = [
        {
            title: '商品编号',
            dataIndex: 'id',
            width: 150,
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            slot: true,
            ellipsis: false,
            width: 300,
            slotData: {
                goods: {
                    goodsName: 'goodsName',
                    goodsImage: 'original',
                },
            },
        },

        {
            title: '销售模式',
            dataIndex: 'salesModel',
            slot: true,
            slotData: {
                tag: salesModel, //这个就不写了具体的格式就是 goodsType 那样
            },
        },
        {
            title: '商品类型',
            dataIndex: 'goodsType',
            slot: true,
            width: '100',
            slotData: {
                tag: goodsType,
            },
        },
        {
            title: '商品价格',
            dataIndex: 'price',
            currency: true,
        },
        {
            title: '库存',
            dataIndex: 'quantity',
        },
        {
            title: '审核状态',
            dataIndex: 'authFlag',
            slot: true,
            slotData: {
                tag: authFlag, //这个就不写了具体的格式就是 goodsType 那样
            },
        },
        {
            title: '上架状态',
            dataIndex: 'marketEnable',
            slot: true,
            slotData: {
                tag: marketEnable, //这个就不写了具体的格式就是 goodsType 那样
            },
        },
    ];

    const sortMethods: MethodsRule = {
        title: '操作',
        width: 250,
        fixed: 'right',
        methods: [
        {
            title: '查看',
            callback: 'detail',
        },
        {
            title: '库存',
            callback: 'detail',
        },
        {
            title: '下架',
            callback: 'upDown',
        },
        ],
    };

    const detail = (row: any) => {
        console.log(row);
    };
</script>

columns and methods Rules 👇

// columns rule
export interface ColumnsDataRule {
  width?: string | number;
  title: string; // 表格显示的title
  dataIndex: string; // 表格显示的数据
  currency?: boolean; // 是否将显示的数据进行货币化处理
  slot?: boolean; // 是否插槽形式
  empty?: string; // 如果没有数据展示的空内容
  ellipsis?: boolean; // 是否展示省略号 默认展示
  slotTemplate?: string;
  slotData?: {
    tag?: Array<{ value: string | boolean, color: string }>, // tag形式写color  https://arco.design/vue/component/tag  具体格式就是 label、value、color
    goods?: {
      goodsImage: string, // 商品图片的key

      goodsName: string, // 商品名称的key
    }, // 商品展示
    link?: string, // 链接
    badge?: Array<{ value: string | boolean, color: string }>, // 状态点
  }; // 插槽内容
}
// methods rule
export interface MethodsRule {
  title: string; // 表格显示的title
  fixed?: string; // 在arco文档中写到如果设置fixed必须设置宽度。如果scroll x轴的宽度不够，也是不会显示的 具体可看arco的文档
  methods: Array<{
    title?: string, // 方法按钮的title
    callback?: string, // 回调的方法名 
    type?: string, // 按钮的类型 arco的文档中有写
    status?: string, // 按钮的status arco的文档中有写
    slot?: boolean, // 是否插槽形式
    slotTemplate?: string,
  }>; // 方法按钮的title, callback是回调的方法名
  width?: number | string;
}

Look like this 👇

What is slot ? you can custom slot like this 👇

 <tablePage
    ref="tablePageRef"
    :columns="columnsTable"
    :methods="sortMethods"
    :api="getAllCategory"
    @editor="TbaleDataEdit"
>
    <template #children="{ data }">
    {{ data.name }}
    </template>
</tablePage>


const columnsTable = [
    {
      title: '分类名称',
      dataIndex: 'name',
      width: 150,
      slot: true,
      slotTemplate: 'children',
    },
    {
      title: '分类状态',
      dataIndex: 'deleteFlag',
      width: 150,
    },
  ];

Tips

Default request api params

 params: {
    pageNumber: 1, 
    pageSize: 10,
    sort: 'createTime',
    order: 'desc', 
}

// if you want to custom request api params
<easyArcoTable xxx :customApiParams='{
    pageNumber: 1, 
    pageSize: 10,

}'></easyArcoTable>

Default response JSON

// first

{
    result:{
        records:[] 
    }
}

// second
{
    result:[]
}

Custom response JSON

{
    data:{
        records:[] 
    }
}


// need to set result 

<easyArcoTable xxx :result='result'></easyArcoTable>

const result = 'data.records'

OBJECT 传参数说明

| Attribute | Description | Type | Required | | ------------------ | --------------------------------------------- | -------- | ---- | | columns | Table headers | array | Yes | | api | API request | function | Yes | | checkbox | Table checkbox | boolean | No | | apiParams | Additional request data | Object | No | | customApiParams | Custom request | Object | No | | enablePagination | Display pagination | boolean | No | | dataList | Data without API request | null | No | | max | Maximum display content (for non-paging) | null | No |