# arco-pro

**Repository Path**: li-cailing/arco-pro

## Basic Information

- **Project Name**: arco-pro
- **Description**: arco-pro  vue3  ProTable TableList typescript组件 mock数据
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 3
- **Created**: 2023-06-27
- **Last Updated**: 2025-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于arco-design组件库vue3 ProTable、TableList组件
## 组件都是用 TypeScript 编写的、通过eslint、mock数据模拟真实操作
git链接: [https://github.com/licailing/arco-pro](https://github.com/licailing/arco-pro)
预览地址: [https://licailing.github.io/arco-pro/](https://licailing.github.io/arco-pro/)

# 运行

```bash
npm install
npm run serve
```
### TableList是基于ProTable高度封装的组件
#### 高级筛选-收起
![高级筛选-收起](src/assets/images/TableList%E9%AB%98%E7%BA%A7%E7%AD%9B%E9%80%89%E5%88%97%E8%A1%A8%E6%9F%A5%E8%AF%A2.png)
#### 高级筛选-展开
![高级筛选-展开](src/assets/images/TableList%E9%AB%98%E7%BA%A7%E7%AD%9B%E9%80%89%E5%B1%95%E5%BC%80.png)
#### 普通筛选-展开
![普通筛选-展开](src/assets/images/TableList%E6%99%AE%E9%80%9A%E7%AD%9B%E9%80%89-%E5%B1%95%E5%BC%80.png)
#### 普通筛选-收起
![普通筛选-收起](src/assets/images/TableList%E6%99%AE%E9%80%9A%E7%AD%9B%E9%80%89-%E6%94%B6%E8%B5%B7.png)
#### 自定义表单部分
![自定义表单](src/assets/images/TableList%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%A8%E5%8D%95.png)
#### 搜素表单-表格-编辑弹框全部自定义
![搜素表单-表格-编辑弹框全部自定义](src/assets/images/TableList-%E6%90%9C%E7%B4%A0%E8%A1%A8%E5%8D%95-%E8%A1%A8%E6%A0%BC-%E7%BC%96%E8%BE%91%E5%BC%B9%E6%A1%86%E8%87%AA%E5%AE%9A%E4%B9%89.png)
![搜素表单-表格-编辑弹框全部自定义](src/assets/images/TableList-%E6%90%9C%E7%B4%A0%E8%A1%A8%E5%8D%95-%E8%A1%A8%E6%A0%BC-%E7%BC%96%E8%BE%91%E5%BC%B9%E6%A1%86%E8%87%AA%E5%AE%9A%E4%B9%891.png)
#### ProTable默认表单
![ProTable默认表单](src/assets/images/TableList%E9%BB%98%E8%AE%A4%E8%A1%A8%E5%8D%95.png)
#### 高级筛选及普通筛选代码实现
```vue
<template>
  <div class="container">
    <Breadcrumb :items="['menu.list', 'menu.list.searchTable']" />
    <a-card title="高级查询">
      <TableList
        :cache="true"
        search-type="light"
        :light-search-config="lightSearchConfig"
        :columns="columns"
        url="/api/list/policy"
        :buttons="buttons"
        :row-selection="rowSelection"
        :pagination="pagination"
        :option-width="260"
      >
        <template #contentType="{ record }">
          <a-space>
            <a-avatar
              v-if="record.contentType === 'img'"
              :size="16"
              shape="square"
            >
              <img
                alt="avatar"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-avatar
              v-else-if="record.contentType === 'horizontalVideo'"
              :size="16"
              shape="square"
            >
              <img
                alt="avatar"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77721e365eb2ab786c889682cbc721c1.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-avatar v-else :size="16" shape="square">
              <img
                alt="avatar"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea8b09190046da0ea7e070d83c5d1731.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            {{ $t(`searchTable.form.contentType.${record.contentType}`) }}
          </a-space>
        </template>
      </TableList>
    </a-card>
    <a-card class="general-card" title="普通查询">
      <TableList
        :cache="true"
        :pagination="pagination"
        :columns="columns"
        :buttons="buttons"
        :row-selection="rowSelection"
        :option-width="260"
        url="/api/list/policy"
      >
        <template #contentType="{ record }">
          <a-space>
            <a-avatar
              v-if="record.contentType === 'img'"
              :size="16"
              shape="square"
            >
              <img
                alt="avatar"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-avatar
              v-else-if="record.contentType === 'horizontalVideo'"
              :size="16"
              shape="square"
            >
              <img
                alt="avatar"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77721e365eb2ab786c889682cbc721c1.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-avatar v-else :size="16" shape="square">
              <img
                alt="avatar"
                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea8b09190046da0ea7e070d83c5d1731.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            {{ $t(`searchTable.form.contentType.${record.contentType}`) }}
          </a-space>
        </template>
      </TableList>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useI18n } from 'vue-i18n';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import TableList, { ButtonData } from '@/components/TableList';

  const { t } = useI18n();
  const columns = computed<TableColumnData[]>(() => [
    {
      title: t('searchTable.columns.index'),
      dataIndex: 'index',
      valueType: 'index',
      slotName: 'index',
    },
    {
      title: t('searchTable.columns.number'),
      dataIndex: 'number',
    },
    {
      title: t('searchTable.columns.name'),
      dataIndex: 'name',
    },
    {
      title: t('searchTable.columns.contentType'),
      dataIndex: 'contentType',
      valueEnum: {
        img: {
          text: '图文',
        },
        horizontalVideo: {
          text: '横版短视频',
        },
        verticalVideo: {
          text: '竖版小视频',
        },
      },
      hideInSearch: false,
      slotName: 'contentType',
    },
    {
      title: t('searchTable.columns.filterType'),
      valueEnum: {
        artificial: {
          text: '人工筛选',
        },
        rules: {
          text: '规则筛选',
        },
      },
      dataIndex: 'filterType',
      hideInSearch: false,
    },
    {
      title: t('searchTable.columns.count'),
      dataIndex: 'count',
      hideInSearch: true,
    },
    {
      title: t('searchTable.columns.createdTime'),
      valueType: 'dateRange',
      dataIndex: 'createdTime',
      hideInSearch: false,
    },
    {
      title: t('searchTable.columns.status'),
      dataIndex: 'status',
      hideInSearch: false,
      valueEnum: {
        1: {
          text: '已上线',
          status: 'Success',
        },
        0: {
          text: '已下线',
          status: 'Default',
        },
      },
    },
  ]);
  const pagination = {
    defaultPageSize: 5,
    pageSize: 5,
    pageSizeOptions: [5, 10, 20, 30, 40, 50],
  };
  const lightSearchConfig = {
    search: { placeholder: '请输入集合编号、集合名称' },
  };
  // 操作按钮配置
  const buttons = [
    {
      action: 1,
      alias: 'add',
      path: '/list/search-table/add',
      name: '新增',
    },
    {
      action: 2,
      alias: 'edit',
      path: '/list/search-table/update',
      name: '编辑',
    },
    {
      action: 3,
      alias: 'delete',
      path: '/api/policy/delete',
      name: ({ type }: ButtonData) => {
        return type === 'column' ? '删除' : '批量删除';
      },
      show: ({ type, record }: ButtonData) => {
        if (type === 'column') {
          // 已下线
          return record.status === 0;
        }
        return true;
      },
    },
    {
      action: 2,
      name: '处理',
      handleClick: () => {},
    },
  ];
  const rowSelection = { type: 'checkbox', showCheckedAll: true };
</script>

```
#### 自定义搜索表单、列表、编辑表单代码实现
```vue
<template>
  <div>
    <Breadcrumb :items="['menu.platform', 'menu.platform.premit']" />
    <TableList
      ref="tableRef"
      row-key="premitId"
      url="/api/premit/list"
      modal
      :buttons="buttons"
    >
      <!-- 自定义搜索 -->
      <template #form-search="formData">
        <a-form
          ref="formSearchRef"
          layout="horizontal"
          :model="formSearch"
          @submit="
            ({ values, errors }) => {
              if (!errors) {
                formData.onSubmit(values);
              }
            }
          "
        >
          <a-grid
            :cols="{ xs: 1, sm: 2, md: 3 }"
            :collapsed="collapsed"
            :collapsed-rows="1"
          >
            <a-grid-item>
              <a-form-item label=" 模块" field="premitModule">
                <a-input
                  v-model="formSearch.premitModule"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-grid-item>
            <a-grid-item>
              <a-form-item label="模块描述" field="premitModuleDesc">
                <a-input
                  v-model="formSearch.premitModuleDesc"
                  placeholder="请填写模块描述"
                />
              </a-form-item>
            </a-grid-item>
            <a-grid-item>
              <a-form-item label="方法" field="premitAction">
                <a-input
                  v-model="formSearch.premitAction"
                  placeholder="请填写方法"
                />
              </a-form-item>
            </a-grid-item>
            <a-grid-item>
              <a-form-item label="方法描述" field="premitActionDesc">
                <a-input
                  v-model="formSearch.premitActionDesc"
                  placeholder="请填写方法描述"
                />
              </a-form-item>
            </a-grid-item>
            <a-grid-item
              :style="[{ 'text-align': 'right' }]"
              :span="1"
              :suffix="true"
            >
              <a-form-item>
                <a-space
                  align="end"
                  :style="{ 'justify-content': 'flex-end', 'flex': 1 }"
                >
                  <a-button
                    type="outline"
                    @click="
                      () => {
                        formSearchRef.resetFields();
                        formData.onReset();
                      }
                    "
                  >
                    重置
                  </a-button>
                  <a-button type="primary" html-type="submit"> 提交 </a-button>
                  <a-button type="text" @click="collapsed = !collapsed">
                    收起
                    <icon-down
                      :style="{
                        verticalAlign: 'middle',
                        fontSize: '16px',
                        marginRight: '8px',
                        transition: '0.3s all',
                        transform: `rotate(${collapsed ? 0 : 0.5}turn)`,
                      }"
                    />
                  </a-button>
                </a-space>
              </a-form-item>
            </a-grid-item>
          </a-grid>
        </a-form>
      </template>
      <!-- 自定义table -->
      <template #columns>
        <a-table-column title=" ID" data-index="premitId"></a-table-column>
        <a-table-column title="模块" data-index="premitModule"></a-table-column>
        <a-table-column
          title="模块描述"
          data-index="premitModuleDesc"
        ></a-table-column>
        <a-table-column title="方法" data-index="premitAction">
        </a-table-column>
        <a-table-column title="方法描述">
          <template #cell="{ record }">
            {{ record.premitActionDesc }}
          </template>
        </a-table-column>
      </template>
      <!-- 自定义新增/编辑  -->
      <template #modal-form="{ formRef, isAdd, visible, onCancel, onSubmit }">
        <a-modal
          v-model:visible="visible.value"
          title-align="start"
          :title="isAdd ? '新增' : '编辑'"
          draggable
          :mask-closable="false"
          :footer="false"
        >
          <a-form
            :ref="formRef"
            :model="formModel"
            @submit="
              ({ values, errors }) => {
                if (!errors) {
                  onSubmit(values);
                }
              }
            "
          >
            <a-form-item
              label="模块"
              field="premitModule"
              :rules="[
                {
                  required: true,
                  message: '模块不能为空',
                },
              ]"
            >
              <a-input v-model="formModel.premitModule" placeholder="请输入" />
            </a-form-item>
            <a-form-item
              label="模块描述"
              field="premitModuleDesc"
              :rules="[
                {
                  required: true,
                  message: '模块描述不能为空',
                },
              ]"
            >
              <a-input
                v-model="formModel.premitModuleDesc"
                placeholder="请填写模块描述"
              />
            </a-form-item>
            <a-form-item
              label="方法"
              field="premitAction"
              :rules="[
                {
                  required: true,
                  message: '方法不能为空',
                },
              ]"
            >
              <a-input
                v-model="formModel.premitAction"
                placeholder="请填写方法"
              />
            </a-form-item>
            <a-form-item
              label="方法描述"
              field="premitActionDesc"
              :rules="[
                {
                  required: true,
                  message: '方法描述不能为空',
                },
              ]"
            >
              <a-input
                v-model="formModel.premitActionDesc"
                placeholder="请填写方法描述"
              />
            </a-form-item>
            <a-form-item>
              <a-space
                align="end"
                :style="{ 'justify-content': 'flex-end', 'flex': 1 }"
              >
                <a-button type="outline" @click="onCancel"> 取消 </a-button>
                <a-button type="primary" html-type="submit"> 提交 </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-modal>
      </template>
    </TableList>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import axios from 'axios';
  import { Message } from '@arco-design/web-vue';
  import TableList from '@/components/TableList';
  
  // 操作按钮配置
  const buttons = [
    {
      action: 2,
      alias: 'edit',
      path: '/api/premit/update',
      name: '编辑',
    },
    {
      action: 2,
      alias: 'delete',
      path: '/api/premit/delete',
      name: '删除',
    },
  ];
  const formSearchRef = ref();
  const formSearch = ref({});
  const formModel = ref({});
  const collapsed = ref(true);
  const tableRef = ref();
</script>

```
# 相关链接

* [arco-design](https://arco.design/)
* [Arco Pro](https://arco.design/pro/)