简介
@beisen/data-grid 是一款为企业应用开发量身定制的数据表格组件，支持数据异步加载、列排序、列过滤、单元格编辑等功能。该组件支持 React 和 Vue 两个框架，并且提供了大量的 API 供开发者自定义表格样式和行为。
安装
npm install @beisen/data-grid
使用
React
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- -------------------- ----- ------- - - - ----- ----- ------ ---- -- - ----- ------- ------ ------ -- - ----- ------ ------ ----- -- -- ----- ---- - - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- - --- -- ----- ---------- ---- -- -- -- -------- ----- - ------ - --------- ----------------- ----------- -- -- - ------ ------- ----展开代码
Vue
-- -------------------- ---- ------- ---------- ---------- ------------------ ------------ -- ----------- -------- ------ -------- ---- -------------------- ------ ------- - ----------- - -------- -- ------ - ------ - -------- - - ----- ----- ------ ---- -- - ----- ------- ------ ------ -- - ----- ------ ------ ----- -- -- ----- - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- - --- -- ----- ---------- ---- -- -- -- -- -- -- ---------展开代码
API
columns
数据表格的列配置，每个列包含以下属性：
- name: 列名，必须唯一
- title: 列标题
- width: 列宽度
- align: 列文字对齐方式，可选值为 'left' | 'center' | 'right'
- sortable: 是否可排序，可选值为 true | false，默认为 true
- filterable: 是否可过滤，可选值为 true | false，默认为 true
- filterComponent: 过滤器组件，可以是一个 React/Vue 组件或者一个函数(d => boolean)
- filterValueAccessor: 过滤器取值函数，默认为 d => d[name]
- cellComponent: 单元格组件，可以是一个 React/Vue 组件或者一个函数(d => string | React/Vue Element)
- headerCellComponent: 表头单元格组件，可以是一个 React/Vue 组件或者一个字符串或函数(title => string | React/Vue Element)
data
数据表格的数据，每条数据应该是一个对象，对象的属性名应该与 columns 中的 name 对应。
width
数据表格的宽度，可以是一个数字或者字符串。如果是字符串，则必须带上单位 (如 '100px')。
height
数据表格的高度，可以是一个数字或者字符串。如果是字符串，则必须带上单位 (如 '100px')。
rowHeight
数据表格的行高度，可以是一个数字或者字符串。如果是字符串，则必须带上单位 (如 '30px')。
headerHeight
数据表格的表头高度，可以是一个数字或者字符串。如果是字符串，则必须带上单位 (如 '40px')。
isLoading
数据表格是否正在加载数据，可选值为 true | false，默认为 false。
isSortable
数据表格是否可排序，可选值为 true | false，默认为 true。
isFilterable
数据表格是否可过滤，可选值为 true | false，默认为 true。
onSort
当表格排序发生变化时触发的回调函数，参数为一个对象 { name, direction }，分别表示排序字段和排序方向，direction 的可选值为 'asc' | 'desc'。
onFilter
当表格过滤发生变化时触发的回调函数，参数为一个对象，表示所有的过滤器名称和对应的过滤器值。
总结
通过本文，我们学习了如何使用 @beisen/data-grid 这个数据表格组件。该组件提供了丰富的配置选项和 API，可以满足大多数企业应用开发的需求。通过深入学习该组件，我们可以更好地理解企业应用开发的核心思想，并且能够更快地开发出高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/134455
