EyTable表格(推荐使用)

常规演示

基础表格如下

api:设置一个promise并输出列表，默认会传入page、page_size作为参数，若需要修改字段和额外参数请见useTable详情

columns:设置列，基础字段为 title、 dataIndex、showType,用于展示对应的文字、字段和展示类型。详情

columns.showType: 设置表格类型，详情

<template>
  <div class="ant-table-wrapper">
    <EyTable :columns="columns" :api="api">
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'handler'">
          <a-space>
            <a>添加</a>
            <a style="color: red">删除</a>
          </a-space>
        </template>
      </template>
    </EyTable>
  </div>
</template>

<script setup lang="ts">
import { EyTable } from 'ey-admin';
import { columns } from './config';

// 模拟返回数据
const backData = {
  data: {
    list: [
      {
        name: '卧虎藏龙',
        director: '李安',
        id: 1,
        sale: 35,
        year_type: 1,
      },
      {
        name: '让子弹飞',
        director: '姜文',
        id: 2,
        sale: 45,
        year_type: 2,
      },
      {
        name: '阳光灿烂的日子',
        director: '姜文',
        id: 3,
        sale: 46,
        year_type: 3,
      },
      {
        name: '我不是药神',
        director: '文牧野',
        id: 4,
        sale: 40,
        year_type: 3,
      },
    ],
    otherData: {
      total: 4,
    },
  },
};
const api = (data: any) => {
  console.log('data', data);
  return new Promise(r => {
    setTimeout(() => {
      r(backData);
    }, 1000);
  });
};
</script>

import type { EyColumnItem } from 'ey-admin';
export const columns: EyColumnItem[] = [
  {
    title: '导演',
    dataIndex: 'director',
    showType: 'form',
  },
  {
    title: 'ID',
    dataIndex: 'id',
    showType: 'both',
    width: 80,
  },
  {
    title: '片名',
    dataIndex: 'name',
    showType: 'both',
  },

  {
    title: '售价',
    dataIndex: 'sale',
    width: 80,
  },
  {
    title: '年代',
    dataIndex: 'year_type',
    width: 90,
    customRender: ({ text }) => {
      const obj: Record<number, string> = { 1: '古代', 2: '近代', 3: '现代' };
      return obj[text] || '';
    },
  },
  {
    title: '导演',
    dataIndex: 'director',
    width: 120,
  },
  {
    title: '操作',
    dataIndex: 'handler',
    width: 180,
  },
];

隐藏代码

不同renderKey类型演示

column.renderKey: 如下，不同的renderKey展示不同类型输入选项，默认为renderInput

column.customForm: form中若需要自定义插槽，则设置customForm:true此时插槽名称为对应的dataIndex

<template>
  <div class="ant-table-wrapper">
    <EyTable :columns="columns" :api="api">
      <template #name="{ searchForm }">
        <a-form-item name="name">
          <a-input
            v-model:value="searchForm.name"
            style="width: 120px"
            placeholder="来自于插槽"
          />
        </a-form-item>
      </template>
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'handler'">
          <a-space>
            <a>添加</a>
            <a style="color: red">删除</a>
          </a-space>
        </template>
      </template>
    </EyTable>
  </div>
</template>

<script setup lang="ts">
import { EyTable } from 'ey-admin';
import { columns } from './config';

// 模拟返回数据
const backData = {
  data: {
    list: [
      {
        name: '曹操',
        id: 1,
        sale: 75,
        type: 1,
      },
      {
        name: '诸葛',
        id: 2,
        sale: 76,
        type: 1,
      },
      {
        name: '李世民',
        id: 3,
        sale: '',
        type: 1,
      },
      {
        name: '袁世凯',
        id: 4,
        sale: 78,
        type: 2,
      },
    ],
    otherData: {
      total: 10,
    },
  },
};
const api = (data: any) => {
  console.log('data', data);
  return new Promise(r => {
    r(backData);
  });
};
</script>

<style scoped>
:deep(.vp-doc .ant-table table) {
  all: revert;
}
</style>

import type { EyColumnItem } from 'ey-admin';
export const columns: EyColumnItem[] = [
  {
    title: '书名',
    dataIndex: 'name',
    showType: 'form',
    customForm: true,
  },
  {
    title: '年代',
    dataIndex: 'type',
    showType: 'form',
    renderKey: 'renderSelect',
    elProps: {
      api,
      alwaysLoad: true,
    },
    width: 200,
  },
  {
    title: '时间',
    dataIndex: 'time',
    showType: 'form',
    renderKey: 'renderRangePicker',
    formatter: 'dateToString',
    colDouble: true,
    width: 200,
  },

  {
    title: 'ID',
    dataIndex: 'id',
    width: 200,
  },
  {
    title: '书名',
    dataIndex: 'name',
    customForm: true,
    width: 200,
  },
  {
    title: '售价',
    dataIndex: 'sale',
    width: 200,
  },
  {
    title: '年代',
    dataIndex: 'type',
    width: 90,
    customRender: ({ text }) => {
      const obj: Record<number, string> = { 1: '古代', 2: '近代', 3: '现代' };
      return obj[text] || '';
    },
  },
  {
    title: '操作',
    dataIndex: 'handler',
    width: 180,
  },
];
function api() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: [
          { label: '古代', value: '1' },
          { label: '近代', value: '2' },
          { label: '现代', value: '3' },
        ],
      });
    }, 1000);
  });
}

隐藏代码

API

Attributes

成员	说明	类型	默认值
api	api 请求接口	(data: unknown) => Promise<unknown>	() => {}
columns	表格项设置	EyColumnItem[]	[]
hooksConfig	userTable 的配置	IUseTableOptions<any, any>	{}
tableProps	a-table 自带属性	TableProps	{}

ColumnItem

columns字段本身保留了ant-design-vue中table里columns的所有字段，以下是对一些特殊字段的说明

此处会有较多字段，是为了降低使用者心智负担将form中字段集成于此，当showType为form或者both时可以当作使用ey-form的item配置

成员	说明	类型	默认值
renderKey	表单要渲染的元素	renderKey	—
formatter	要转化输出的值	formatterKey | ((data: unknown) => unknown)	—
formProps	对应 ant-design-vue 中 form-item 的值	FormItemProps	—
options	ey-select 中的 options 选项，同 el-props.options	SelectProps['options']	—
component	渲染的组件类型	string | Component	—
elProps	对于 renderKey 元素的属性	T	—
colProps	grid 布局时可使用	ColProps	—
colDouble	默认布局时使用双倍的 col 值	boolean	—
depend	formitem 的依赖项	(FormGroupItemDepend: TFormGroupItemDepend, deps: unknown[]) => void	—
showType	当前项展示的类型	'column' | 'form' | 'both'	—
title	必填选项，对应的 form.label 或表格显示	string	—
dataIndex	必填选项，对应的 form.value 或表格字段	string	—
customForm	自定义 form 插槽	boolean	—