npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@corgicoding-el/data-table

v2.0.6

Published

基于element-plus的数据列表组件

Downloads

25

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-plustable 参数属性直接直接绑定在组件元素上
  • 所有 element-plustable 事件可以通用 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 setuplang 改为 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-optionsevent-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>