前端开发框架
当前页

BasicTable ​

基于 ElTable, ElPagination 封装的 JSONSchema 的表格 ​

使用 ​

vue
<basic-table 
  :setting="false"
  :columns="columns"
  :data="tableData"
  :total="page.total"
  :page-size="page.pageSize"
  :current-page="page.pageNum"
  @page-change="pageChange"
  @size-change="sizeChange"
>
</basic-table>

参数 ​

  • columns 表格列描述 类型 TableOptions[]
js
label: string; // 表头
prop?: string; // 字段名称
width?: string | number; // 固定宽度
align?: 'left' | 'center' | 'right';
slot?: string; // 自定义slot
ellipsis?: Boolean; //一行展示，溢出展示...,添加title
minWidth?: string; //最小宽度
action?: boolean; // 最后一列操作， 是否使用自定义 action
fixed?: string;   // action列固定 left right
hideColumn?: Function | Boolean; //隐藏列
sortable?: boolean; //是否展示排序
headerSlot?: string; // 自定义表头slot
initShow?: boolean; // 初始化时是否展示，与右上角setting功能联动

例子：

ts
export const columns: TableOptions[] = [
  // {
  //   label: '角色编码',
  //   prop: 'code',
  // },
  {
    label: '角色名称',
    prop: 'name',
    width: 200,
    ellipsis: true,
  },
  {
    label: '角色描述',
    prop: 'description',
    ellipsis: true,
  },
  {
    label: '数据权限',
    prop: 'dataScopeText',
    width: 140,
  },
  {
    label: '租户名称',
    prop: 'tenantName',
    width: 100,
    ellipsis: true,
  },
  {
    label: '状态',
    prop: 'available',
    slot: 'available',
    width: 100,
  },
  {
    label: '操作',
    prop: 'action',
    action: true,
    width: 120,
  },
];
  • data 表格数据
ts
const data: RoleListItem[] = [
  {name: 'zhangsan', description: '管理员', ..., available: '1'},
  {name: 'lisi', description: '普通成员', ..., available: '2'},
]
  • currentPage: number 当前页 默认 1
  • pageSize: number 每页数量 默认 10
  • pageSizes: number[] 可选页数 默认 [10, 20, 30, 40, 50, 100]
  • total: number 总数量 默认 0
  • loading: boolean 表格是否加载中 默认 false
  • setting: boolean 是否显示右上角设置按钮 默认为true
  • pageLayouts: boolean 配置分页的layout属性
  • 除以上属性外，也接收el-table和el-pagination的所有属性

事件 ​

@page-change="pageChange"
@size-change="sizeChange"
  • page-change 监听分页改变事件，接收参数类型 number
  • size-change 监听 分页行数 改变事件，接收参数类型 number

slot ​

vue
<basic-table
  :columns="columns"
  :data="data"
  :total="total"
  :page-size="params.pageSize"
  :current-page="params.pageNum"
  @page-change="pageChange"
  @size-change="sizeChange"
>
        <template #available="{ record }">
          <el-tag v-if="record.available === '1'">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
        <template #action="{ record }">
          <el-button type="primary" :icon="Edit" circle @click="editRole(record.id)" />
          <el-button type="danger" :icon="Delete" circle @click="delRole(record.id)" />
        </template>
      </basic-table>

注意：record 表示当前行的数据

  • 在表格 JSONSchema 定义中 action 通常被用来作为按钮操作，当 action: true 时可以自定义按钮操作列
{
    label: '操作',
    prop: 'action',
    action: true,
    width: 120,
  },
  • 设置字段 slot
{
    label: '状态',
    prop: 'available',
    slot: 'available',
    width: 100,
  },