树状表格多选可以通过哪个方法实现，官方文档没有看到

[alibaba]

树状表格多选可以通过哪个方法实现，官方文档没有看到

[shinima]

这个可以在树状模式的基础上修改实现，我过会儿写个 demo

[shinima]

我写了个 demo，你可以参考一下相关的代码。

在线 demo：示例-表格交互-单选与多选--树形选择

示例源码：

ali-react-table/stories/examples/interactions/select.stories.tsx

Lines 238 to 294 in 0d92db8

	export function 树形选择() {
	const [checkedKeys, setCheckedKeys] = useState<string[]>([])
	const { dataSource: rawDataSource, isLoading } = useCityDataSource()
	// 处理数据： 选取前 4 个省份，每个省份下选取 3 个城市
	// 为每一行设置 name 作为展示名称；
	// 为每一行数据设置 key，作为该行的主键；注意在相应的地方配置 primaryKey="key"
	const dataSource = rawDataSource.slice(0, 4).map((prov) => ({
	...prov,
	name: prov.provinceName,
	key: `prov:${prov.provinceName}`,
	children: prov.children.slice(0, 3).map((city) => ({
	...city,
	name: city.cityName,
	key: `city:${city.cityName}`,
	})),
	}))
	const columns = [{ name: '省份/城市', code: 'name', width: 160 }, ...cols.indCols, cols.updateTime]
	const renderData = applyTransforms(
	{ dataSource, columns },
	useTreeModeTransform({ primaryKey: 'key' }),
	makeTreeSelectTransform({
	// treeModeTransform 会对 dataSource 进行过滤，导致树不完整
	// 这里要将 dataSource 传给 makeTreeSelectTransform，传递的树是完整的
	tree: dataSource,
	primaryKey: 'key',
	value: checkedKeys,
	onChange: setCheckedKeys,
	checkboxColumn: { width: 48, lock: true },
	// 可以省略 rootKey，此时将不会出现全选的 checkbox
	rootKey: 'all',
	// checkStrictly 可以设置为 true，此时父子节点的选中状态不再关联
	checkStrictly: false,
	// checkedStrategy 也可以设置为 all / child
	checkedStrategy: 'parent',
	}),
	)
	return (
	<div>
	<FusionStyles />
	<p>
	当前选中的 key 值：<code>{JSON.stringify(checkedKeys)}</code>
	</p>
	<BaseTable
	primaryKey="key"
	isLoading={isLoading}
	dataSource={renderData.dataSource}
	columns={renderData.columns}
	/>
	</div>
	)
	}

树状数据处理工具：
https://github.com/alibaba/ali-react-table/blob/0d92db89b6ed654c837d511eaca508044c4dae80/stories/examples/interactions/makeTreeDataHelper.tsx

[zjcwill]

示例-表格交互-单选与多选--树形选择

感谢 demo补充

[zjcwill]

我试了下 现在组件里没有暴露这个方法 makeTreeSelectTransform 版本为1.01

[shinima]

我试了下 现在组件里没有暴露这个方法 makeTreeSelectTransform 版本为1.0

确实没有暴露，你先直接 copy 一下代码吧。

代码在这两个文件中：

• https://github.com/alibaba/ali-react-table/blob/0d92db89b6ed654c837d511eaca508044c4dae80/stories/examples/interactions/select.stories.tsx
• https://github.com/alibaba/ali-react-table/blob/0d92db89b6ed654c837d511eaca508044c4dae80/stories/examples/interactions/makeTreeDataHelper.tsx

ali-react-table 的定位是灵活的、高性能底层表格组件，像 makeTreeSelectTransform 这样的 API 可以在上层定制得到的话，ali-react-table 就不会再暴露这些 API 了。