JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

  • Vue 开发手册

    • Vue 分离版本介绍
    • 快速开始、安装部署
    • 配置参数、主题配置
    • 前端权限、按钮权限
    • BasicForm 表单组件
    • BasicTable 表格组件
      • 介绍
      • 使用
        • 最简单示例
        • useTable 示例
      • 属性
        • TableSetting
        • BasicColumn
        • ComponentType
        • CellFormat
      • 事件
      • 表格插槽
      • 查询表单插槽
      • 内置组件
        • TableAction 操作列组件
        • TableImg 单元格图片组件
      • 应用实例
        • 本地树表数据
        • 表格嵌套子表
    • 源码解析、表单列表
    • 常用组件库、Hooks
    • 图标 Icon Svg 组件
    • 国际化、多语言
    • Less CSS 样式库
    • 引入外部依赖
    • 分离版 ★ 常见问题 ★
  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

BasicTable 表格组件、使用方法、属性列表

# 介绍

对 Antdv 的 Table 表格 (opens new window) 组件进行封装, 并嵌入了查询表单,与 Table 完美整合,方便实现表格数据的筛选。

v5.1.0 及之前版本:Antdv 2.x Table 表格 (opens new window)

# 使用

# 最简单示例

<template>
  <div class="p-4">
    <BasicTable
      title="基础示例"
      titleHelpMessage="温馨提醒"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
    >
      <template #toolbar>
        <a-button type="primary"> 操作按钮 </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicColumn, BasicTable } from '/@/components/Table';

  const columns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
    },
  ];

  const dataSource = [
    { id: '1', testInput: '123', testTextarea: '456' },
    { id: '2', testInput: '789', testTextarea: '123' },
  ];

  export default defineComponent({
    components: { BasicTable },
    setup() {
      return {
        columns,
        dataSource,
      };
    },
  });
</script>
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

# useTable 示例

页面表格推荐使用方法,方便传值和调用内部方法。

<template>
  <div class="p-4">
    <BasicTable @register="register">
      <template #toolbar>
        <a-button type="primary" @click="handleButton"> 加载表格 </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicColumn, BasicTable, useTable } from '/@/components/Table';

  const columns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
      customRender: ({ record }) => {
        return record.testInput || '无数据';
      },
    },
  ];

  const dataSource = [
    { id: '1', testInput: '123', testTextarea: '456' },
    { id: '2', testInput: '789', testTextarea: '123' },
  ];

  export default defineComponent({
    components: { BasicTable },
    setup() {
      const [register, methods] = useTable({
        title: '基础示例',
        titleHelpMessage: '温馨提醒',
        pagination: false,
        columns,
        dataSource,
      });

      function handleButton() {
        methods.setLoading(true);
        methods.setColumns(columns);
        methods.setTableData(dataSource);
        setTimeout(() => {
          methods.setLoading(false);
        }, 200);
      }

      return {
        register,
        handleButton,
      };
    },
  });
</script>
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

# register

register 用于注册 useTable,如果需要使用 useTable 提供的 api,必须将 register 传入组件的 @register

<template>
  <BasicTable @register="register" />
</template>
<script>
  export default defineComponent({
    components: { BasicForm },
    setup() {
      const [register] = useTable();
      return { register };
    },
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# methods

setProps

类型:(props: Partial<BasicTableProps>) => void

说明: 用于设置表格参数

reload

类型:(opt?: FetchParams) => Promise<void>

说明: 刷新表格

redoHeight

类型:() => void

说明: 重新计算表格高度

setLoading

类型:(loading: boolean) => void

说明: 设置表格 loading 状态

getDataSource

获取表格数据

类型:<T = Recordable>() => T[]

说明: 获取表格数据

getRawDataSource

获取后端接口原始数据

类型:<T = Recordable>() => T

说明: 获取后端接口原始数据

getColumns

类型:(opt?: GetColumnsParams) => BasicColumn[]

说明: 获取表格数据

setColumns

类型:(columns: BasicColumn[] | string[]) => void

说明: 设置表头数据

setTableData

类型:<T = Recordable>(values: T[]) => void

说明: 设置表格数据

setPagination

类型:(info: Partial<PaginationProps>) => void

说明: 设置分页信息

deleteSelectRowByKey

类型:(key: string) => void

说明: 根据 key 删除取消选中行

getSelectRowKeys

类型:() => string[]

说明: 获取选中行的 keys

getSelectRows

类型:<T = Recordable>() => T[]

说明: 获取选中行的 rows

clearSelectedRowKeys

类型:() => void

说明: 清空选中行

setSelectedRowKeys

类型:(rowKeys: string[] | number[]) => void

说明: 设置选中行

getPaginationRef

类型:() => PaginationProps | boolean

说明: 获取当前分页信息

getShowPagination

类型:() => boolean

说明: 获取当前是否显示分页

setShowPagination

类型:(show: boolean) => Promise<void>

说明: 设置当前是否显示分页

getRowSelection

类型:() => TableRowSelection<Recordable>

说明: 获取勾选框信息

updateTableData

类型:(index: number, key: string, value: any)=>void

说明: 更新表格数据

updateTableDataRecord

类型: (rowKey: string | number, record: Recordable) => Recordable | void

说明: 根据唯一的 rowKey 更新指定行的数据.可用于不刷新整个表格而局部更新数据

deleteTableDataRecord

类型: (rowKey: string | number | string[] | number[]) => void

说明: 根据唯一的rowKey 动态删除指定行的数据.可用于不刷新整个表格而局部更新数据

insertTableDataRecord

类型: (record: Recordable, index?: number) => Recordable | void

说明: 可根据传入的 index 值决定插入数据行的位置,不传则是顺序插入,可用于不刷新整个表格而局部更新数据

getForm

类型:() => FormActionType

说明: 如果开启了搜索区域。可以通过该函数获取表单对象函数进行操作

expandAll

类型:() => void

说明: 展开树形表格

collapseAll

类型:() => void

说明: 折叠树形表格

# 属性

温馨提醒

  • 除以下参数外,官方文档内的 props 也都支持,具体可以参考 Antdv Table 表格 (opens new window)
  • v5.1.0 及之前版本:Antdv 2.x Table 表格 (opens new window)
属性 类型 默认值 可选值 说明
clickToRowSelect boolean true - 点击行是否选中 checkbox 或者 radio。需要开启
sortFn (sortInfo: SorterResult<any>) => any - - 自定义排序方法。见下方全局配置说明
filterFn (sortInfo: Partial<Recordable<string[]>>) => any - - 自定义过滤方法。见下方全局配置说明
showTableSetting boolean false - 显示表格设置工具
tableSetting TableSetting - - 表格设置工具配置,见下方 TableSetting
striped boolean true - 斑马纹
inset boolean false - 取消表格的默认 padding
autoCreateKey boolean true - 是否自动生成 key
showSummary boolean false - 是否显示合计行
summaryData any[] - - 自定义合计数据。如果有则显示该数据
emptyDataIsShowTable boolean true - 在启用搜索表单的前提下,是否在表格没有数据的时候显示表格
summaryFunc (...arg) => any[] - - 计算合计行的方法
isTreeTable boolean false - 是否树表
api (...arg: any) => Promise<any> - - 请求接口,可以直接将src/api内的函数直接传入
beforeFetch (T)=>T - - 请求之前对参数进行处理
afterFetch (T)=>T - - 请求之后对返回值进行处理
handleSearchInfoFn (T)=>T - - 开启表单后,在请求之前处理搜索条件参数
fetchSetting FetchSetting - - 接口请求配置,可以配置请求的字段和响应的字段名,见下方全局配置说明
immediate boolean true - 组件加载后是否立即请求接口,在 api 有传的情况下,如果为 false,需要自行使用 reload 加载表格数据
searchInfo any - - 额外的请求参数
useSearchForm boolean false - 使用搜索表单
formConfig any - - 表单配置,参考表单组件的 Props
columns any - - 表单列信息 BasicColumn[]
showIndexColumn boolean ture - 是否显示序号列
indexColumnProps any - - 序号列配置 BasicColumn
actionColumn any - - 表格右侧操作列配置 BasicColumn
ellipsis boolean true - 文本超过宽度是否显示...
canResize boolean true - 是否可以自适应高度(如果置于PageWrapper组件内,请勿启用PageWrapper的fixedHeight属性,二者不可同时使用)
clearSelectOnPageChange boolean false - 切换页码是否重置勾选状态
resizeHeightOffset number 0 - 表格自适应高度计算结果会减去这个值
rowSelection any - - 选择列配置
title string - - 表格标题
titleHelpMessage string | string[] - - 表格标题右侧温馨提醒
maxHeight number - - 表格最大高度,超出会显示滚动条
dataSource any[] - - 表格数据,非 api 加载情况
bordered boolean false - 是否显示表格边框
pagination any - - 分页信息配置,为 false 不显示分页
loading boolean false - 表格 loading 状态
scroll any - - 参考官方文档 scroll
beforeEditSubmit ({record: Recordable,index: number,key: string \ | number,value: any}) => Promise<any> - -
  • 注意:defaultExpandAllRows、defaultExpandedRowKeys 属性在 BasicTable 中不支持,并且在 Antdv table v2.2.0 之后也被移除。

# TableSetting

表格右上角按钮组设置

{
  // 是否显示刷新按钮
  redo?: boolean;
  // 是否显示尺寸调整按钮
  size?: boolean;
  // 是否显示字段调整按钮
  setting?: boolean;
  // 是否显示全屏按钮
  fullScreen?: boolean;
}
1
2
3
4
5
6
7
8
9
10

# BasicColumn

除参考官方 Column 属性 (opens new window) 外,扩展以下参数

v5.1.0 及之前版本:Antdv 2.x Column 属性 (opens new window)

属性 类型 默认值 可选值 说明
defaultHidden boolean false - 默认隐藏,可在列配置显示
helpMessage string|string[] - - 列头右侧帮助文本
edit boolean - - 是否开启单元格编辑
editRow boolean - - 是否开启行编辑
editable boolean false - 是否处于编辑状态
editComponent ComponentType Input - 编辑组件,见下方 ComponentType
editComponentProps any - - 对应编辑组件的 props
editRule ((text: string, record: Recordable) => Promise<string>) - - 对应编辑组件的表单校验
editDefaultValue object - - 编辑组件的默认值
editDefaultLabel object - - 编辑组件的标签默认值
onEditRow ()=>void - - 触发行编辑
customRender ({text, record, index}) {} - - 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并
format CellFormat - - 单元格格式化(编辑表格下可以替代customRender实现,编辑后的单元格格式化)
auth RoleEnum | RoleEnum[] | string | string[] - - 根据权限编码来控制当前列是否显示
ifShow boolean | ((action: ActionItem) => boolean) - - 根据业务状态来控制当前列是否显示
dataIndex string - - 列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法
dataLabel string - - 数据的标签显示,举例 dataIndex 是 userCode,dataLabel 是 userName
dictType string - - 字典类型的单元格,设置字典类型,返回标签
actions (record: Recordable) => ActionItem[] - - 列表操作列设置
dropDownActions (record: Recordable) => ActionItem[] - - 列表操作更多按钮设置
slot string - - 5.2.0+ 新增,使用 slot 指定插槽名,不在使用 slots.customRender

# ComponentType

编辑表格的表单组件类型 src/components/Table/src/componentMap.ts (opens new window)

export type ComponentType =
  | 'Input'
  | 'InputNumber'
  | 'Select'
  | 'ApiSelect'
  | 'Checkbox'
  | 'Switch'
  | 'DatePicker'
  | 'TimePicker';
1
2
3
4
5
6
7
8
9

# CellFormat

export type CellFormat =
  | string
  | ((text: string, record: Recordable, index: number) => string | number)
  | Map<string | number, any>;
1
2
3
4

# 事件

温馨提醒

除以下事件外,官方文档内的 event 也都支持,具体可以参考 Antdv Table 事件 (opens new window)

v5.1.0 及之前版本:Antdv 2.x Table 事件 (opens new window)

事件 回调参数 说明
fetch-success Function({items,total}) 接口请求成功后触发
fetch-error Function(error) 错误信息
selection-change Function({keys,rows}) 勾选事件触发
row-click Function(record, index, event) 行点击触发
row-dbClick Function(record, index, event) 行双击触发
row-contextmenu Function(record, index, event) 行右键触发
row-mouseenter Function(record, index, event) 行移入触发
row-mouseleave Function(record, index, event) 行移出触发
edit-end Function({record, index, key, value}) 单元格编辑完成触发
edit-cancel Function({record, index, key, value}) 单元格取消编辑触发
edit-row-end Function() 行编辑结束触发
edit-change Function({column,value,record}) 单元格编辑组件的 value 发生变化时触发

edit-change 说明

对于 edit-change 事件,record 中的 editValueRefs 装载了当前行的所有编辑组件(如果有的话)的值的 ref 对象,可用于处理同一行中的编辑组件联动。请看下面的例子

      function onEditChange({ column, record }) {
        // 当同一行的单价或者数量发生变化时,更新合计金额(三个数据均为当前行编辑组件的值)
        if (column.dataIndex === 'qty' || column.dataIndex === 'price') {
          const { editValueRefs: { total, qty, price } } = record;
          total.value = unref(qty) * unref(price);
        }
      }
1
2
3
4
5
6
7

# 表格插槽

Slots

温馨提醒

除以下参数外,官方文档内的 slot 也都支持,具体可以参考 Antdv Table 插槽 (opens new window)

v5.1.0 及之前版本:Antdv 2.x Table 插槽 (opens new window)

名称 说明
tableTitle 表格顶部左侧区域
toolbar 表格顶部右侧区域
expandedRowRender 展开行区域
headerTop 表格顶部区域(标题上方)

# 查询表单插槽

Form-Slots

当启用 form 查询表单后。以 form-xxxx 为前缀的 slot 会被视为 form 的 slot

xxxx 为 form 组件的 slot。具体参考 Form 组件文档,例如:

form-submitBefore
1

# 内置组件

# TableAction 操作列组件

用于表格右侧操作列渲染,只能用于表格内部,默认已内置

# 使用

<template>
  <TableAction
    :actions="actionColumn.actions(record)"
    :dropDownActions="actionColumn.dropDownActions(record)"
  />
</template>
<script lang="ts" setup>
import { TableAction } from '/@/components/Table';
const actionColumn: BasicColumn = {
  width: 160, // 操作列宽
  actions: (record: Recordable) => [
    {
      icon: 'clarity:note-edit-line',
      title: t('编辑数据'),
      onClick: handleForm.bind(this, { id: record.id }),
      // 按钮权限控制,指定权限字符串
      auth: 'test:testData:edit',
    },
    {
      icon: 'ant-design:stop-outlined',
      color: 'error',
      title: t('停用数据'),
      // 是否需要启用确认框
      popConfirm: {
        title: t('是否确认停用数据'),
        confirm: handleDisable.bind(this, { id: record.id }),
      },
      // 按钮权限控制,指定权限字符串
      auth: 'test:testData:edit',
      // 控制按钮是否显示(区别:show 是显示或隐藏;ifShow 是显示或移除)
      show: () => record.status === '0',
      ifShow: () => record.status === '0',
    },
  ],
  // 操作列更多按钮定义
  dropDownActions: (record: Recordable) => [
    {
      icon: 'ant-design:reload-outlined',
      label: t('重置密码'),
      onClick: handleResetpwd.bind(this, { userCode: record.userCode }),
      auth: 'sys:empUser:resetpwd',
    },
  ],
};
</script>
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

# 属性

属性 类型 默认值 可选值 说明
actions ActionItem[] - - 右侧操作列按钮列表
dropDownActions ActionItem[] - - 右侧操作列更多下拉按钮列表

ActionItem

export interface ActionItem {
  // 按钮文本
  label: string;
  // 是否禁用
  disabled?: boolean;
  // 按钮颜色
  color?: 'success' | 'error' | 'warning';
  // 按钮类型
  type?: string;
  // button组件props
  props?: any;
  // 按钮图标
  icon?: string;
  // 气泡确认框
  popConfirm?: PopConfirm;
  // 是否显示分隔线
  divider?: boolean;
  // 根据权限编码来控制当前列是否显示
  auth?: RoleEnum | RoleEnum[] | string | string[];
  // 根据业务状态来控制当前列是否显示
  ifShow?: boolean | ((action: ActionItem) => boolean);
  // 点击回调
  onClick?: Fn;
  // Tooltip配置,可以配置为string,或者完整的tooltip属性
  tooltip?: string | TooltipProps
}
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

有关 Tooltip Props 的说明,请参考 Tooltip 文字提示 (opens new window)   v5.1.0 及之前版本:Antdv 2.x Tooltip 文字提示 (opens new window)

PopConfirm

export interface PopConfirm {
  title: string;
  okText?: string;
  cancelText?: string;
  confirm: Fn;
  cancel?: Fn;
  icon?: string;
}
1
2
3
4
5
6
7
8

# TableImg 单元格图片组件

用于渲染单元格图片,支持图片预览,只能用于表格内部

# 使用

<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #img="{ text }">
        <TableImg :size="60" :simpleShow="true" :imgList="text" />
      </template>
      <template #imgs="{ text }">
        <TableImg :size="60" :imgList="text" />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
import { TableImg } from '/@/components/Table';
const columns: BasicColumn[] = [
  {
    title: '图片列表1',
    dataIndex: 'imgArr',
    helpMessage: [
      '这是简单模式的图片列表',
      '只会显示一张在表格中',
      '但点击可预览多张图片',
    ],
    width: 140,
    slots: { customRender: 'img' }, // 5.1.0 及之前
    slot: 'img', // 5.2.0+ (Antdv 3.x 不再使用 slots)
  },
  {
    title: '照片列表2',
    dataIndex: 'imgs',
    width: 160,
    slots: { customRender: 'imgs' }, // 5.1.0 及之前
    slot: 'imgs', // 5.2.0+ (Antdv 3.x 不再使用 slots)
  },
]
</script>
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

# 属性

属性 类型 默认值 可选值 说明
imgList string[] - - 图片地址列表
size number - - 图片大小
simpleShow boolean false true/false 简单显示模式(只显示第一张图片)
showBadge boolean true true/false 简单模式下是否显示计数Badge
margin number 4 - 常规模式下的图片间距
srcPrefix string - - 在每一个图片src前插入的内容

# 应用实例

# 本地树表数据

<template>
  <BasicTable @register="register">
    <template #toolbar>
      <a-button type="primary" @click="expandAll">展开全部</a-button>
      <a-button type="primary" @click="collapseAll">折叠全部</a-button>
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  const [register, { expandAll, collapseAll }] = useTable({
    title: '树形表格',
    isTreeTable: true,
    childrenColumnName: 'children',
    rowSelection: { type: 'checkbox' },
    clickToRowSelect: false,
    titleHelpMessage: '树形组件不能和序列号列同时存在',
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        width: 250,
        align: 'left',
      },
      {
        title: '地址',
        dataIndex: 'address',
        align: 'left',
      },
      {
        title: '创建时间',
        width: 200,
        sorter: true,
        dataIndex: 'createDate',
      },
    ],
    dataSource: getTreeTableData(),
    rowKey: 'id',
  });
  function getTreeTableData() {
    const data: any = (() => {
      const arr: any = [];
      for (let index = 1; index < 60; index++) {
        arr.push({
          id: `l1-${index}`,
          name: `JeeSite-${index}`,
          address: `Shandong-${index}`,
          createDate: new Date().toLocaleString(),
          children: [
            {
              id: `l2-${index}`,
              name: `JeeSite-l2-${index}`,
              address: `Shandong-l2-${index}`,
              createDate: new Date().toLocaleString(),
            },
          ],
        });
      }
      return arr;
    })();
    return data;
  }
</script>
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

# 表格嵌套子表

<template>
  <BasicTable
    title="表格嵌套子表例子"
    titleHelpMessage="温馨提醒"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    :canResize="true"
  >
    <template #expandedRowRender>
      <BasicTable
        :columns="expandedColumns"
        :dataSource="expandedDataSource"
        :maxHeight="200"
        :pagination="false"
        :canResize="false"
        rowKey="id"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { BasicColumn, BasicTable } from '/@/components/Table';
  const columns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
    },
  ];
  const dataSource = [
    { id: '1', testInput: '123', testTextarea: '456', treeLeaf: '0' },
    { id: '2', testInput: '789', testTextarea: '123', treeLeaf: '0' },
  ];
  const expandedColumns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
    },
  ];
  const expandedDataSource = [
    { id: '1', testInput: '123', testTextarea: '456' },
    { id: '2', testInput: '789', testTextarea: '123' },
  ];
</script>
<style lang="less">
  .jeesite-basic-table {
    .ant-table-expand-icon-col {
      width: 15px;
    }
    .ant-table-row .ant-table-cell:first-child {
      text-align: center;
    }
    .ant-table-tbody .ant-table-wrapper:only-child {
      padding: 20px;
    }
  }
</style>
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
进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← BasicForm 表单组件 源码解析、表单列表→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式