表格高级

API 获取数据

超级表格支持手动传入 data 数据，同时也支持传入 request-api 函数来获取数据。

单独使用超级表格可能觉得 api 函数比较鸡肋，但这主要是搭配超级页面组件使用。

暂无数据

组合式函数

通过 组合式函数 函数，监听任意一个超级表格，然后就通过函数来控制该表格。

暂无数据

共 0 条

前往

页

vue

<script setup lang="ts">
import { ref, reactive, h, Fragment } from "vue";
import { ElButton } from "element-plus";
import type { TableColumn } from "@/components/pro/table";
import { ProTable, useProTable } from "@/components/pro/table";

const { tableRegister, tableMethods } = useProTable();
const { setProps, setColumn, getElTableExpose, addColumn, delColumn, clearSelection, changePagination } = tableMethods;

const DataService = {
  getList: async () => {
    const data = [
      { username: "张三", gender: 1 },
      { username: "李四", gender: 2 },
      { username: "王五", gender: 1 },
      { username: "赵六", gender: 1 },
      { username: "孙七", gender: 2 },
      { username: "周八", gender: 2 },
    ];

    return Promise.resolve({
      code: 200,
      message: "success",
      data,
    });
  },
};

const showTableButton = (show: boolean) => {
  setProps({ toolButton: show });
};

const showSelections = (show: boolean) => {
  setColumn([
    {
      prop: "selection",
      field: "hidden",
      value: show,
    },
  ]);
};

const showPagination = (show: boolean) => {
  setProps({ pageScope: show });
};

const index = ref(1);

const changeUsername = () => {
  setColumn([
    {
      prop: "username",
      field: "label",
      value: `用户姓名 ${index.value}`,
    },
  ]);
  index.value++;
};

const showExpandedRows = (show: boolean) => {
  setColumn([
    {
      prop: "expand",
      field: "hidden",
      value: show,
    },
  ]);
};

const selectAllNone = async () => {
  const elTableRef = await getElTableExpose();
  elTableRef?.toggleAllSelection();
};

const showAction = ref(true);

const delOrAddAction = () => {
  if (showAction.value) {
    delColumn("operation");
    showAction.value = false;
  } else {
    addColumn({
      prop: "operation",
      label: "操作",
      fixed: "right",
      width: 180,
      render: () =>
        h(Fragment, null, [
          h(ElButton, { plain: true, type: "primary" }, { default: () => "编辑" }),
          h(ElButton, { plain: true, type: "danger" }, { default: () => "删除" }),
        ]),
    });
    showAction.value = true;
  }
};

const showStripe = ref(false);
const showOrHiddenStripe = () => {
  setProps({
    stripe: !showStripe.value,
  });
  showStripe.value = !showStripe.value;
};

const height = ref<string | number>("auto");
const fixedHeaderOrAuto = () => {
  if (height.value === "auto") {
    height.value = 300;
    setProps({
      height: height.value,
    });
  } else {
    setProps({
      height: "auto",
    });
    height.value = "auto";
  }
};

export interface ResUserList {
  id: string;
  username: string;
  gender: number;
  user: { detail: { age: number } };
  idCard: string;
  email: string;
  address: string;
  createTime: string;
  status: number;
  avatar: string;
  photo: any[];
  children?: ResUserList[];
}

const columns: TableColumn[] = [
  { type: "selection", prop: "selection", fixed: "left", width: 60 },
  { type: "index", label: "#", width: 60 },
  { type: "sort", label: "Sort", width: 80 },
  { type: "expand", prop: "expand", label: "Expand", width: 80 },
  { prop: "username", label: "用户姓名" },
  {
    prop: "gender",
    label: "性别",
    options: [
      { genderLabel: "男", genderValue: 1 },
      { genderLabel: "女", genderValue: 2 },
    ],
    optionField: { label: "genderLabel", value: "genderValue" },
  },
  {
    prop: "operation",
    label: "操作",
    fixed: "right",
    width: 180,
    render: () =>
      h(Fragment, null, [
        h(ElButton, { plain: true, type: "primary" }, { default: () => "编辑" }),
        h(ElButton, { plain: true, type: "danger" }, { default: () => "删除" }),
      ]),
  },
];
</script>

<template>
  <el-space fill style="width: 100%">
    <el-card shadow="never" header="UseTable 操作">
      <el-space wrap>
        <el-button @click="showTableButton(false)">隐藏顶栏所有按钮</el-button>
        <el-button @click="showTableButton(true)">显示顶栏所有按钮</el-button>
        <el-button @click="showSelections(true)">隐藏多选</el-button>
        <el-button @click="showSelections(false)">显示多选</el-button>
        <el-button @click="showPagination(false)">隐藏分页</el-button>
        <el-button @click="showPagination(true)">显示分页</el-button>
        <el-button @click="changePagination({ pageNum: 2 })">切换到第二个页</el-button>
        <el-button @click="changeUsername">修改用户姓名</el-button>
        <el-button @click="showExpandedRows(true)">隐藏展开行</el-button>
        <el-button @click="showExpandedRows(false)">显示展开行</el-button>
        <el-button @click="selectAllNone">全选/全不选</el-button>
        <el-button @click="clearSelection">清空选择</el-button>
        <el-button @click="delOrAddAction">删除/添加操作列</el-button>
        <el-button @click="showOrHiddenStripe">删除/隐藏斑马纹</el-button>
        <el-button @click="fixedHeaderOrAuto">固定表头/自动</el-button>
      </el-space>
    </el-card>

    <ProTable
      :columns
      :request-api="DataService.getList"
      page-scope
      :page-info="{ pageSize: 5 }"
      @register="tableRegister"
    />
  </el-space>
</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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

函数式组件渲染

通过 createTableComponent 函数式创建 ProTable 组件。

暂无数据

共 0 条

前往

页

vue

<script setup lang="tsx">
import type { TableColumn } from "@/components/pro/table";
import { useProTable } from "@/components/pro/table";
import { ElButton } from "element-plus";

const DataService = {
  getList: async () => {
    const data = [
      { username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
      { username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
      { username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
    ];

    return Promise.resolve({
      code: 200,
      message: "success",
      data,
    });
  },
};

const {
  createMethods: { createTableComponent },
} = useProTable();

/**
 * context 里有 slots 和 attrs，如果元素里有 slots 和 attrs，则必传
 */
const RenderProTable = (_: any, context: Record<string, any>) => {
  // 函数式创建 Template 组件
  return createTableComponent({ pageScope: "client", columns: columns, requestApi: DataService.getList }, context);
};

const columns: TableColumn[] = [
  { prop: "username", label: "用户姓名", el: "copy" },
  {
    prop: "gender",
    label: "性别",
    el: "el-tag",
    elProps: (value: number) => {
      if (value === 1) return { type: "success" };
      return { type: "danger" };
    },
    options: async () => {
      return [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ];
    },
  },
  {
    prop: "progress",
    label: "进度",
    el: "el-progress",
    elSlots: {
      default: ({ value }) => value + "%",
    },
  },
  { prop: "birthday", label: "生日" },
];
</script>

<template>
  <RenderProTable>
    <template #head-left="scope">
      <el-button type="primary">新增用户</el-button>
      <el-button type="primary" plain>批量添加用户</el-button>
      <el-button type="primary" plain>导出用户数据</el-button>
      <el-button type="primary" plain>To 子集详情页面</el-button>
      <el-button type="danger" plain :disabled="!scope.isSelected">批量删除用户</el-button>
    </template>
  </RenderProTable>
</template>

函数式渲染

通过 createTable 函数式动态渲染 ProTable 组件到指定元素。

该函数会返回 useProTable 函数的返回值，如果你不清楚什么是 useProTable，请查看组合式函数。

vue

<script setup lang="tsx">
import type { TableColumn } from "@/components/pro/table";
import { useProTable } from "@/components/pro/table";
import { ElButton } from "element-plus";
import { onMounted } from "vue";

const DataService = {
  getList: async () => {
    const data = [
      { username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
      { username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
      { username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
    ];

    return Promise.resolve({
      code: 200,
      message: "success",
      data,
    });
  },
};

const {
  createMethods: { createTable },
} = useProTable();

onMounted(async () => {
  // 函数式动态渲染组件到 proTableInstance 元素
  const {
    tableMethods: { setColumn },
  } = await createTable(
    "proTableInstance",
    { pageScope: "client", columns: columns, requestApi: DataService.getList },
    tableSlots
  );

  setColumn([{ prop: "username", field: "label", value: `用户姓名 Teek` }]);
});

const tableSlots = {
  "head-left": (scope: any) => (
    <>
      <ElButton type="primary">新增用户</ElButton>
      <ElButton type="primary" plain>
        批量添加用户
      </ElButton>
      <ElButton type="primary" plain>
        导出用户数据
      </ElButton>
      <ElButton type="primary" plain>
        To 子集详情页面
      </ElButton>
      <ElButton type="danger" plain disabled={!scope.isSelected}>
        批量删除用户
      </ElButton>
    </>
  ),
};

const columns: TableColumn[] = [
  { prop: "username", label: "用户姓名", el: "copy" },
  {
    prop: "gender",
    label: "性别",
    el: "el-tag",
    elProps: (value: number) => {
      if (value === 1) return { type: "success" };
      return { type: "danger" };
    },
    options: async () => {
      return [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ];
    },
  },
  {
    prop: "progress",
    label: "进度",
    el: "el-progress",
    elSlots: {
      default: ({ value }) => value + "%",
    },
  },
  { prop: "birthday", label: "生日" },
];
</script>

<template>
  <div ref="proTableInstance"></div>
</template>

表格高级 ​

API 获取数据 ​

组合式函数 ​

函数式组件渲染 ​

函数式渲染 ​

表格高级

API 获取数据

组合式函数

函数式组件渲染

函数式渲染