columns features tips 设置样式 交互丢失

[Mluocheng]

代码是copy 的源demo。

function makeChildren(prefix: string) { return [ { id: ${prefix}-1, title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee', children: [ { id: ${prefix}-1-1, title: '三级标题', dept: '盒马产品技术部-UED', dest: '云南大理', guide: 'Douglas Lee' }, { id: ${prefix}-1-2, title: '三级标题', dept: '盒马产品技术部-前端', dest: '云南大理', guide: 'Douglas Lee' }, ], }, { id: ${prefix}-2, title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee', children: [ { id: ${prefix}-2-1, title: '三级标题', dept: '盒马产品技术部-UED', dest: '云南大理', guide: 'Douglas Lee' }, { id: ${prefix}-2-2, title: '三级标题', dept: '盒马产品技术部-前端', dest: '云南大理', guide: 'Douglas Lee' }, ], }, { id: ${prefix}-3, title: '二级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee' }, ] }

function renderOptions() { return ( <> <div className="item">编辑 <div className="sep" /> <div className="item danger">删除 <div className="sep" /> </> ) }

const operationCol = { lock: true, name: '操作', render: renderOptions, width: 200 }

const dataSource4 = [ { id: '1', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: 'South Maddison', guide: 'Don Moreno', children: makeChildren('1'), }, { id: '2', title: '一级标题', dept: '航旅事业部-酒店业务', dest: 'Emilhaven', guide: 'Douglas Richards', children: makeChildren('2'), }, { id: '3', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: '云南大理', guide: 'Douglas Lee', children: makeChildren('3'), }, { id: '4', title: '一级标题', dept: '信息平台部-用户体验部', dest: '杭州千岛湖', guide: 'Eric Castillo', children: makeChildren('4'), }, { id: '5', title: '一级标题', dept: '消费者事业部-淘宝-UED', dest: 'East Karl', guide: 'Herbert Patton' },

]

const columns: ArtColumn[] = [ { code: 'title', name: '标题', width: 200, features: { tips: '我是指标的详细信息~~' } }, { code: 'dept', name: '部门名称', width: 180, features: { tips: '我是指标的详细信息~~' } }, { code: 'dest', name: '团建目的地', width: 160 }, { code: 'guide', name: '当地导游', width: 160 }, operationCol, ] export default () => { const pipeline = useTablePipeline({ components: fusion as any }) .input({ dataSource: dataSource4, columns }) .primaryKey('id') .mapDataSource((dataSource) => collectNodes(dataSource, 'pre')) .use( features.multiSelect({ defaultValue: ['1', '3'], highlightRowWhenSelected: true, clickArea: 'cell', }), ) .use(features.tips())

return ( <> <WebsiteBaseTable {...pipeline.getProps()} /> </> ) }