Web的Ant-Design框架的Table表格组件(2)
9.固定列 对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 scroll.x 配合使用。通过columns的fixed: 'left'属性实现。 import { Table } from 'antd'; import type { ColumnsType } from 'antd/es/table'; im…
|
111
|
|
885 字
|
34 分钟
Web的Ant-Design框架的Table表格组件(1)
Web的Ant-Design框架的Table表格组件,用于前端显示表格:当大量结构化的数据需要展示,需要对数据进行排序、搜索、自定义操作等行为时,可以使用Table组件。 1.简单的使用 首先定义数据源dataSource,数组格式,然后定义第一行字段columns,如下 const dataSource = [ { key: '1', n…
|
125
|
|
908 字
|
16 分钟
React-ts页面Web处理Excel导入、导出
React-ts页面处理Excel, 环境React+Ant Design 1.引用xlsx和file-saver import * as XLSX from 'xlsx'; import { saveAs } from 'file-saver'; 2.具体导入逻辑 export const readExcelFile = (file: File)…
|
173
|
|
343 字
|
15 分钟
Web加悬浮tip显示
原始 { title: '链接URL', dataIndex: 'url', key: 'url', width: urlColumnWidth, // 使用主表格链接数列的宽度 render: (url: string) => ( <a href={`https://${url}`} target="_blank" rel="noopene…
|
144
|
|
84 字
|
4 分钟