@corgicoding-el/data-table
v2.0.6
Published
基于element-plus的数据列表组件
Downloads
13
Maintainers
Readme
@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>