行单选

示例

预览点击展开或收拢

	公司名称	金额	金融机构	申请人

	阿里巴巴网络技术有限公司	600,000.00(CNY)	招商银行丨杭州分行	James Collier
	阿里巴巴网络技术有限公司	600,000.00(CNY)	建设银行丨未来科技城	Philip Burke
	阿里巴巴网络技术有限公司	600,000.00(CNY)	交通银行丨浙大路支行	Wesley Cruz
	阿里巴巴网络技术有限公司	600,000.00(CNY)	招商银行丨庆春路支行	Billy Horton
	阿里巴巴网络技术有限公司	600,000.00(CNY)	招商银行丨文一路分行	Paul Tran
	阿里巴巴网络技术有限公司	600,000.00(CNY)	农业银行丨杭州分行	Anna Poole

源码点击展开或收拢

function 行单选() { const dataSource = assets.biz.dataSource1 const columns = assets.biz.columns1 const pipeline = useTablePipeline({ components: fusion }) .input({ dataSource, columns }) .primaryKey('id') .use( features.singleSelect({ defaultValue: '1', highlightRowWhenSelected: true, checkboxPlacement: 'start', clickArea: 'row', }), ) return <BaseTable {...pipeline.getProps()} /> }

function 行单选() {
  const dataSource = assets.biz.dataSource1
  const columns = assets.biz.columns1

  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .primaryKey('id')
    .use(
      features.singleSelect({
        defaultValue: '1',
        highlightRowWhenSelected: true,
        checkboxPlacement: 'start',
        clickArea: 'row',
      }),
    )

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

使用方式

• 启用行单选功能之前，pipeline 必须已经设置了 primaryKey。
• 行单选依赖单选框组件，使用 singleSelect 之前需要通过 pipeline context 设置 components.Radio。

pipeline.use(features.singleSelect(options))

options 结构如下：

export interface SingleSelectFeatureOptions {  /** 是否高亮被选中的行 */  highlightRowWhenSelected?: boolean
  /** 非受控用法：默认选中的值 */  defaultValue?: string
  /** 受控用法：当前选中的值 */  value?: string
  /** 受控用法：选中值改变回调 */  onChange?: (next: string) => void
  /** 判断一行是否禁用 */  isDisabled?(row: any, rowIndex: number): boolean
  /** 点击事件的响应区域 */  clickArea?: 'radio' | 'cell' | 'row'
  /** 单选框所在列的 column 配置，可指定 width，lock 等属性 */  radioColumn?: Partial<ArtColumnStaticPart>
  /** 单选框所在列的位置 */  radioPlacement?: 'start' | 'end'
  /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */  stopClickEventPropagation?: boolean}