diff --git a/examples/search-table-react/050-tabs.md b/examples/search-table-react/050-tabs.md index 1a224e8..7dae30d 100644 --- a/examples/search-table-react/050-tabs.md +++ b/examples/search-table-react/050-tabs.md @@ -53,6 +53,60 @@ const Demo = () => { export default Demo ``` +## 分类不同列数据 + +```tsx +import { useState } from 'react' +import { sleep } from '@examples/utils' +import schema from './helpers/schema' +import columns from './helpers/columns' +import columnsVT from './helpers/columns-value-type' +import createDataSource from './helpers/createDataSource' +import createDataSourceVT from './helpers/createDataSource-vt' +import SearchTable from '@schema-render/search-table-react' + +const items = [ + { key: '1', label: '分类一' }, + { key: '2', label: '分类二' }, +] + +const Demo = () => { + const [activeKey, setActiveKey] = useState('1') + + return ( + [{ text: '编辑' }, { text: '详情' }], + }} + request={async (searchParams) => { + // 模拟请求接口获取表格数据 + await sleep() + const fetchData = activeKey === '1' ? createDataSource : createDataSourceVT + const data = fetchData(searchParams.pageSize) + + // 主动抛错,验证异常场景 + if (Math.random() > 0.7) throw new Error('抛出一个错误') + + return { data, total: 100 } + }} + /> + ) +} + +export default Demo +``` + ## 开启列设置 设置 `showSetting` 属性为 `true` 可以开启列设置功能。 diff --git a/examples/search-table-react/100-columns-setting.md b/examples/search-table-react/100-columns-setting.md index 03cb473..388e4eb 100644 --- a/examples/search-table-react/100-columns-setting.md +++ b/examples/search-table-react/100-columns-setting.md @@ -109,7 +109,6 @@ const items = [ const Demo = () => { const [activeKey, setActiveKey] = useState('1') - const [cols, setCols] = useState(columns) return ( { }, }} table={{ - columns: cols, + columns: activeKey === '1' ? columns : columnsVT, showRowNumber: true, actionItems: () => [{ text: '编辑' }, { text: '详情' }], }} @@ -132,10 +131,6 @@ const Demo = () => { await sleep() const fetchData = activeKey === '1' ? createDataSource : createDataSourceVT const data = fetchData(searchParams.pageSize) - - // 接口请求完毕再更新 columns 数据 - setCols(activeKey === '1' ? columns : columnsVT) - return { data, total: 100 } }} />