CTable表格组件

# 组件介绍

这是一个基于el-table封装，使用json数据配置式的表格组件，支持表格列排序、列筛选、新增、刷新、删除等常用操作，可传入插槽。

# 引入组件

import { App } from "vue";
import CTable from "./CTable.vue";

export function setupRegisterGlobComp(app: App) {
  app.component("CTable", CTable);
}

1
2
3
4
5
6

# 参数配置

额外参数	类型	必填	说明
columns	CTableColumn	必填	表格核心配置项
tableData	Any	必填	表格数据
showHeader	Boolean	非必填	用于展示顶部操作栏

# 类型

import type { TableColumnCtx } from "element-plus/es/components/table/src/table-

export type CTableColumn<T> = Partial<TableColumnCtx<T>> & {
  scoped?: string; // 用于插槽，类似于原有的el-table内的嵌套
  show?: boolean; // 是否展示该列
  locked?: boolean; // 是否能够移动此列
  initialWidth?: string; // 列初始宽度
};

1
2
3
4
5
6
7
8

# 代码示例

<script setup lang="ts">
// id title content
const dataSource = ref([
  {
    id: 1,
    title: "title1",
    content: "content1"
  },
  {
    id: 2,
    title: "title2",
    content: "content2"
  }
]);
const articleColumns = computed(() => {
  return [
    {
      type: "selection",
      show: true,
      width: "55"
    },
    {
      prop: "id",
      show: true,
      label: "ID",
      width: "80"
    },
    {
      prop: "title",
      show: true,
      label: "Title",
      width: "180"
    },
    {
      prop: "content",
      show: true,
      label: "Content",
      showOverflowTooltip: true
    },
    {
      prop: "actions",
      show: true,
      label: "Actions",
      fixed: "right",
      scoped: "actions",
      width: "150"
    }
  ];
});
</script>

<template>
  <div class="relative w-full">
    <div class="p-[8px] absolute w-full">
      <c-table
        :table-data="dataSource"
        :show-header="true"
        :columns="articleColumns"
        header-align="right"
        stripe
        style="width: 100%"
        @selection-change="() => {}"
      >
        <template #options>
          <el-button icon="refresh" circle />
          <el-button type="primary" icon="plus" circle />
          <el-button type="danger" icon="delete" circle />
        </template>
        <template #actions>
          <el-button size="small">Edit</el-button>
          <el-button size="small" type="danger">Delete</el-button>
        </template>
      </c-table>
    </div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

table-example1

# More

精力有限（懒），更多的使用方式可以查看文章列表页或Table源码自行探索，使用上有困难的可以在issue上进行咨询我

编辑

上次更新: 2022/10/10, 09:49:29

← SearchFilter组件 Vscode插件配置项监听→