@corgicoding-el/data-table

为 @corgicoding/web-quick-start 工程模板设定的数据列表组件，基于 el-table 封装，传入 columns 字段即可实现表格的渲染

绑定依赖

无

如何使用

安装工程到本地，并按需使用或全局使用

前置依赖

• element-plus
• lodash-es
• @vueuse/core
• vue (3.x)
• vue-i18n

如果没有以上依赖，工程执行以下命令进行安装

pnpm install element-plus vue @vueuse/core lodash-es vue-i18n -S
pnpm install @types/lodash-es -D

如果使用 web-quick-start 模板则无需任何操作，上述依赖已经在模板安装

安装

使用 pnpm 下载

pnpm install @corgicoding-el/data-table -S

使用

设计以下table

ID	用户名
1	Corgi Coding
2	Charles Chan

<script setup lang="ts">
import DataTable, { type ColumnType } from '@corgicoding-el/data-table';
// import '@corgicoding-el/data-table/style.css';

const testData = [
  {
    id: 1,
    username: 'Corgi Coding'
  },
  {
    id: 2,
    username: 'Charles Chan'
  }
];

const tableColumns: ColumnType[] = [
  {
    prop: 'id',
    name: 'ID'
  },
  {
    prop: 'username',
    name: '用户名'
  }
];
</script>

<template>
  <DataTable :data="testData" :columns="tableColumns"></DataTable>
</template>

ColumnType 类型定义如下

export interface ColumnType {
  prop: string; // 表头返回字段参数
  name?: string; // 表头显示名称
  type?: string | 'selection'; // 可以设置为 selection
  width?: number | string; // 宽度占比
  fixed?: boolean | string; // 固定位置
  align?: string; // 文本居中布局
  slotName?: string; // 添加插槽名自定义
  formatter?: (row?: any, column?: any, cellValue?: any, index?: number) => any; // 格式化显示数据
  renderHeader?: (column?: any) => any; // 表头自定义渲染
  selectable?: (row?: any, index?: number) => any; // 若 type 为 selection 则操作是否可选
  sortable?: boolean | 'custom'; // 排序
  columnOptions?: any; // el-table-column 列选项
  eventOptions?: any; // el-table-column 事件选项
  hidden?: boolean; // 隐藏
  sort?: number; // 排序
  children?: Array<ColumnType>; // 是否有子集
}

props入参

export interface DataTableProps {
  data?: Array<any>; // 列表数据
  columns?: Array<ColumnType>; // 配置项
  height?: string | number; // 高度
  maxHeight?: string | number; // 最大高度
  rowKey?: string | ((row: any) => any); // 行id
  // 树形表格选项，使用后 row-key 为必填
  treeOptions?: {
    defaultExpandAll: boolean;
    lazy?: boolean;
    load?: (row: any, treeNode: any, resolve: any) => void;
    props?: {
      hasChildren: string;
      children: string;
    };
  };
  defaultSelections?: Array<any>; // 默认选中行，分页多选有效
  stripe?: boolean; // 斑马纹
  noMutiple?: boolean; // 非多选 = 单选模式
  tableAttrs?: TableProps<any>; // element-plus table额外绑定属性
  eventMethods?: any; // element-plus table额外绑定方法
  emptyStyle?: any; // 空
}

emits 事件

const Emits = defineEmits([
  'selection-change', // 原生 el-table 选择变化
  'key-selection-change', // table 选中行 key 变化 (后续 table 分页功能记录)
  'page-selection-change' // table 选中行 row 数组变化 (后续 table 分页功能记录)
]);

暴露参数

defineExpose({
  /**
   * @description el-table 挂载ref
   */
  tableRef,
  /**
   * @description tag:分页 - key选中变化
   */
  keySelections,
  /**
   * @description tag:分页 - 全部的 key 记录选中
   */
  totalKeySelections,
  /**
   * @description tag:分页 - 重置 key 选中状态回初始组件设置 defaultSelections
   */
  resetKeySelection
});

按需使用

较为完整的案例如下

<script setup lang="tsx">
import DataTable, { type ColumnType } from '@corgicoding-el/data-table';
import '@corgicoding-el/data-table/style.css';

const testData = [
  {
    id: 1,
    username: 'Corgi Coding',
    sex: -1,
    age: 100
  },
  {
    id: 2,
    username: 'Charles Chan',
    age: 25,
    sex: 1
  }
];

const tableColumns: ColumnType[] = [
  {
    prop: 'id',
    name: 'ID'
  },
  {
    prop: 'username',
    name: 'UserName'
  },
  {
    prop: 'sex',
    slotName: 'sex', // 插槽
    name: '性别'
  },
  {
    prop: 'age',
    name: '年龄',
    formatter(row, column, cellValue, index) {
      if (cellValue === 100) {
        return <div class="text-red-500">{cellValue}</div>;
      }
      return row.age;
    }
  }
];
</script>

<template>
  <DataTable :data="testData" :columns="tableColumns" :height="666">
    <template #sex="{ row, index }">
      <el-tag>行{{ index }} - {{ row.sex !== -1 ? '男' : '女' }}</el-tag>
    </template>
  </DataTable>
</template>

全局引入

在 main.ts 引入

import ElDataTable from '@corgicoding-el/data-table';
import '@corgicoding-el/data-table/style.css';

app.use(ElDataTable);

原生 element-plus 使用

文档： https://element-plus.org/zh-CN/component/table.html

• 所有 element-plus 的 table 参数属性直接直接绑定在组件元素上
• 所有 element-plus 的 table 事件可以通用 eventOptions 进行绑定

<DataTable
  :table-options="{
    fit: false
  }"
  :event-options="{
    'header-click': () => {}
  }"
></DataTable>

配置插槽

配置项中设置 slotName 并在组件标签插入内容即可实现

[
  {
    prop: 'sex',
    slotName: 'sex', // 插槽
    name: '性别'
  }
];

template 插入

<DataTable
  :data="testData"
  :columns="tableColumns"
  :height="666"
  row-key="id"
  :tree-options="{
    defaultExpandAll: true
    // props: { hasChildren: 'hasChildren', children: 'children' }
  }"
>
  <template #sex="{ row, index }">
    <el-tag>行{{ index }} - {{ row.sex !== -1 ? '男' : '女' }}</el-tag>
  </template>
</DataTable>

使用 formatter 或 jsx

script setup 的 lang 改为 tsx / jsx，并在 formatter 函数返回即可

  {
    prop: 'age',
    name: '年龄',
    formatter(row, column, cellValue, index) {
      if (cellValue === 100) {
        return <div class="text-red-500">{cellValue}</div>;
      }
      return row.age;
    }
  }

树形数据

传入 tree-options 进行相关配置，或使用 table-options 和 event-options 对原生 el-table 进行控制

<script setup lang="tsx">
import DataTable, { type ColumnType } from '@corgicoding-el/data-table';
// import '@corgicoding-el/data-table/style.css';

const testData = [
  {
    id: 1,
    username: 'Corgi Coding',
    sex: -1,
    age: 100,
    hasChildren: true,
    children: [
      {
        id: 3,
        username: 'Test',
        age: 99,
        sex: -1
      }
    ]
  },
  {
    id: 2,
    username: 'Charles Chan',
    age: 25,
    sex: 1
  }
];

const tableColumns: ColumnType[] = [
  {
    prop: 'selection',
    type: 'selection',
    width: 60
  },
  {
    prop: 'id',
    name: 'ID',
    width: 90
  },
  {
    prop: 'username',
    name: '用户名',
    renderHeader({ column }) {
      return column.label + '*';
    }
  },
  {
    prop: 'sex',
    slotName: 'sex', // 插槽
    name: '性别'
  },
  {
    prop: 'age',
    name: '年龄',
    formatter(row, column, cellValue, index) {
      if (cellValue === 100) {
        return <div class="text-red-500">{cellValue}</div>;
      }
      return row.age;
    }
  }
];
</script>

<template>
  <DataTable
    :data="testData"
    :columns="tableColumns"
    :height="666"
    row-key="id"
    :tree-options="{
      defaultExpandAll: true
      // props: { hasChildren: 'hasChildren', children: 'children' }
    }"
  >
    <template #sex="{ row, index }">
      <el-tag>行{{ index }} - {{ row.sex !== -1 ? '男' : '女' }}</el-tag>
    </template>
  </DataTable>
</template>

合并表头

在表格配置数组中使用 children 字段类似树形图套用

<script setup lang="tsx">
import DataTable, { type ColumnType } from '@corgicoding-el/data-table';
// import '@corgicoding-el/data-table/style.css';

const testData = [
  {
    id: 1,
    username: 'Corgi Coding',
    sex: -1,
    age: 100,
    hasChildren: true,
    children: [
      {
        id: 3,
        username: 'Test',
        age: 99,
        sex: -1
      }
    ]
  },
  {
    id: 2,
    username: 'Charles Chan',
    age: 25,
    sex: 1
  }
];

const tableColumns: ColumnType[] = [
  {
    prop: 'selection',
    type: 'selection',
    width: 60
  },
  {
    prop: 'id',
    name: 'ID',
    width: 90
  },
  {
    prop: 'userinfo',
    name: '用户信息',
    children: [
      {
        prop: 'username',
        name: '用户名',
        renderHeader({ column }) {
          return column.label + '*';
        }
      },
      {
        prop: 'sex',
        slotName: 'sex', // 插槽
        name: '性别'
      },
      {
        prop: 'age',
        name: '年龄',
        formatter(row, column, cellValue, index) {
          if (cellValue === 100) {
            return <div class="text-red-500">{cellValue}</div>;
          }
          return row.age;
        }
      }
    ]
  }
];
</script>

<template>
  <DataTable
    :data="testData"
    :columns="tableColumns"
    :height="666"
    row-key="id"
    :tree-options="{
      defaultExpandAll: true
      // props: { hasChildren: 'hasChildren', children: 'children' }
    }"
  >
    <template #sex="{ row, index }">
      <el-tag>行{{ index }} - {{ row.sex !== -1 ? '男' : '女' }}</el-tag>
    </template>
  </DataTable>
</template>