npm 包 ttk-table-app-edittable 是一个可编辑表格组件，适用于前端开发中需要展示和编辑表格数据的场景。本文将为您介绍该组件的使用方法及相关注意事项。
安装
使用 npm 进行安装：
npm install ttk-table-app-edittable
使用方法
在您的项目中引入该组件：
import Edittable from 'ttk-table-app-edittable';
创建表格组件并传入数据：
-- -------------------- ---- ------- ----- ------- - - - ------ ----- ------ ------- ------- ------- -- - ------ ----- ------ ------ ------- -------- -- - ------ ----- ------ --------- ------- --------- -------- ----- ---- -- - ----- ---- - - - --- -- ----- ----- ---- --- ------- --- -- - --- -- ----- ----- ---- --- ------- --- -- - --- -- ----- ----- ---- --- ------- --- -- - ----- ------- - - ------- ---- --------- ----- ---------- ----- -------- ----- - ----- --------- - --- ------------------- --------
其中，options 对象可接受以下参数：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| height | number | 300 | 表格组件的高度 |
| editable | boolean | true | 是否可编辑 |
| resizable | boolean | true | 是否可伸缩 |
| columns | Array<{ label, field }> | 表格列的配置 | |
| data | Array<{ id, ... }> | 表格数据 | |
| editor<type> | (value: any) => React.React | 编辑器组件，type 为对应列的 editor 参数的值 | |
| render<type> | (value: any, row: {...}) => React.React | 单元格渲染组件，type 为对应列的 editor 参数的值 |
列配置
columns 数组中的每一项代表一列的配置信息，示例如下：
const columns = [
{ label: '姓名', field: 'name', editor: 'input' },
{ label: '年龄', field: 'age', editor: 'number' },
{ label: '性别', field: 'gender', editor: 'select', options: ['男', '女'] },
]其中，label 为列的名称，field 为该列对应的数据属性名，editor 为编辑器类型，options 为下拉框选项（仅在 editor === 'select' 时使用）。
目前支持的编辑器类型有：
| 值 | 描述 |
|---|---|
| input | 文本框 |
| number | 数字输入框 |
| select | 下拉框 |
| date | 日期选择器 |
| datetime | 日期时间选择器 |
| time | 时间选择器 |
| switch | 开关 |
| checkbox | 多选框 |
| radio | 单选框 |
| textarea | 多行文本框 |
| password | 密码输入框 |
| 邮箱输入框 | |
| color | 颜色选择器 |
| file | 单文件选择器 |
| image | 单图片选择器 |
| files | 多文件选择器 |
| images | 多图片选择器 |
| rich-text | 富文本框 |
| markdown | Markdown 文本框 |
| json-editor | JSON 数据编辑器 |
其中，textarea、password、email、file、image、files 和 images 编辑器需要通过增加相应的 props 进行配置：
const columns = [
{ label: '姓名', field: 'name', editor: 'input' },
{ label: '备注', field: 'notes', editor: 'textarea', rows: 4 },
{ label: '密码', field: 'password', editor: 'password' },
{ label: '头像', field: 'avatar', editor: 'image', accept: 'image/*', preview: true },
{ label: '附件', field: 'attachments', editor: 'files', accept: 'application/*' },
]| 参数 | 类型 | 描述 |
|---|---|---|
| rows | number | textarea 的行数 |
| accept | string | 限制上传文件的类型 |
| preview | boolean | 是否可以预览图片 |
| minWidth | number | 图片最小宽度（仅在 editor === 'image' 时有效） |
| maxWidth | number | 图片最大宽度（仅在 editor === 'image' 时有效） |
| minHeight | number | 图片最小高度（仅在 editor === 'image' 时有效） |
| maxHeight | number | 图片最大高度（仅在 editor === 'image' 时有效） |
| maxSize | number | 上传文件的大小限制（以字节为单位，默认为 10M） |
| urls | Array | 已上传的图片/文件的下载链接（仅在 editor === 'file' 或 'image' 时有效） |
表格数据
data 数组中的每一项代表一条数据记录，示例如下：
const data = [
{ id: 1, name: '张三', age: 18, gender: '男' },
{ id: 2, name: '李四', age: 20, gender: '女' },
{ id: 3, name: '王五', age: 22, gender: '男' },
]其中，id 为该条数据的唯一标识符。当使用内置的 CRUD 函数时，会通过 id 来确定对应的数据记录。data 中的数据格式必须和 columns 中配置的字段对应。如果 data 数组中的数据数量很大，可以考虑分页加载数据。
编辑器组件
编辑器组件用于在单元格中显示和编辑数据。组件接收一个 value 属性，根据不同的编辑器类型，它可以是字符串、数字、布尔值、Date 对象等。
例如，用 input 编辑器编辑一个字符串的数据：
const input = ({ value, onChange }) => {
return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} />;
}然后在 columns 中将 editor 属性设置为 'input'，即可使用该编辑器。
单元格渲染
在渲染表格时，你可能需要根据不同的数据类型和状态，使用不同的方式来呈现单元格内容。你可以使用 render<type> 属性来指定一个渲染器组件。渲染器组件接收一个 value 和 row（表示该行对应的数据记录），返回一个 React 元素。
例如，用自定义渲染器渲染一个布尔值：
-- -------------------- ---- ------- ----- ----------------- - -- ----- -- -- ----- - --- - ---- ----- ------- - - - ------ ----- ------ ------- ------ --- -- - ------ ------- ------ ---------- -------------- ----------------- -- - ------ ----- ------ ----- -- -- ----- ---- - - - ----- ----- -------- ----- ---- -- -- - ----- ----- -------- ------ ---- -- -- - ----- ----- -------- ----- ---- -- -- --
然后在 columns 中将 renderboolean 属性设置为 MyBooleanRenderer，即可使用该渲染器。
方法和事件
表格组件提供了一些常用的方法和事件：
getSelectedRows()
获取所有被选中的行（返回值为一个数组）
const selectedRows = edittable.getSelectedRows();
getChangedRows()
获取所有被修改过的行（返回值为一个数组）
const changedRows = edittable.getChangedRows();
getAddedRows()
获取所有被新添加的行（返回值为一个数组）
const addedRows = edittable.getAddedRows();
getRemovedRows()
获取所有被删除的行（返回值为一个数组）
const removedRows = edittable.getRemovedRows();
getRowById(id: string | number)
根据数据记录的唯一标识符获取对应的行数据（返回值为一个对象）
const row = edittable.getRowById(1);
addRow(rowData: object)
在表格中添加一行数据（rowData 是一个对象）
edittable.addRow({ name: '赵六', age: 24, gender: '女' });removeRow(id: string | number)
根据数据记录的唯一标识符删除一行数据（返回值为一个对象）
edittable.removeRow(1);
updateRow(id: string | number, rowData: object)
根据数据记录的唯一标识符更新一行数据（rowData 是一个对象）
edittable.updateRow(1, { name: '张三', age: 19, gender: '男' });onSave(callback: (rows: object[]) => void)
在点击保存按钮后触发回调函数（函数接收一个 rows 参数，表示所有被修改过的数据记录）
edittable.onSave((rows) => {
console.log(rows);
});onCancel(callback: () => void)
在点击取消按钮后触发回调函数
edittable.onCancel(() => {
console.log('取消编辑');
});onAddRow(callback: (row: object) => void)
在新增一行数据时触发回调函数
edittable.onAddRow((row) => {
console.log(row);
});onRemoveRow(callback: (id: string | number) => void)
在删除一行数据时触发回调函数
edittable.onRemoveRow((id) => {
console.log(id);
});小结
使用 npm 包 ttk-table-app-edittable，可以快速地在前端项目中创建一个可编辑表格组件。你可以使用丰富的内置编辑器和渲染器来满足表格展示和编辑的需求，并通过提供的方法和事件，对表格数据进行增删改查操作。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b45c6eb7e50355dbec0