全网react+飞冰（ice）UI框架组件实例（1）-表格篇

最近在做在一个后台系统，用的就是技术就是react+飞冰（ice）UI框架，在开发过程中发现关于飞冰这个UI框架的相关资料比较少，所以我这里分享一些常用的飞冰UI组件实例，由于内容比较多，所以几篇来写！

表格初使化数据定义

//  初使化数据定义字段
const tableData: {
    data: {
      list: [],
      pageNum: 1,
      total: 0,
      size: 0
    },
}

// 申请一个变量，获取跟更新数据
const [tableData, settableData] = useState(tableData)

1、初使化数据定义字段，2、申请一个变量，获取跟更新数据

表格的数据渲染

<Table
hasBorder={false}
className={styles.pollingTable}
dataSource={tableData.data.list}
loading={loading}
>
    <Table.Column align="left" title="巡检状态" dataIndex="type" cell={(val) => {
    return val == 0 ? '正常' : val == 1 ? '报警' : val == 2 ? '隐患' : val == 3 ? '异常' : val == 4 ? '离线' : '未知'
    }} />
    <Table.Column align="left" title="设备名称" dataIndex="deviceName" cell={(val) => {
    return val ? val : '- - -'
    }} />
    <Table.Column align="left" title="安装位置" dataIndex="address" cell={(val) => {
    return val ? val : '- - -'
    }} />
    <Table.Column align="left" title="最近自检时间" dataIndex="uploadtime" cell={(val) => {
    return val ? common.getdate(val) : '- - -'
    }} />
    <Table.Column align="center" title="地图跳转" dataIndex="dutyname" cell={(i, v, row) => {
    return <CustomIcon type="icon-map-jump" size='medium' className={styles.MaoJump} onClick={()=>{
    MapJump(row)
    }}/>
    }} />
</Table>

上面的代码包含了单元格数据根据条件判断进行显示，单元格添加图标带点击方法

表格分页信息

<Box direction="row" align="center" justify="space-between" className={styles.pagination}>
    <div className={styles.total}>
        共<span>{tableData.data.total}</span>条信息
    </div>
    <Pagination current={tableData.data.pageNum} pageSize={tableData.data.pageSize} total={tableData.data.total} onChange={(val) => {
        condition.page.pageNum=val
        setcondition(condition)
        page()
    }} />
</Box>

上面的代码包含，总条数和分页功能

表格的数据处理

获取数组数据里面某个值拼成一个字符串

<Table.Column align="left" title="适用设备" dataIndex="deviceTypes" cell={(val) => {
  return Object.keys(val).map(col => (
    <>
      {val.length>0 &&(
        <span key={col}>{val[col].deviceCodeName},</span>
      )}
    </>
  ))
}}/>

获取字段字符串对象数据转成对象， 带汽泡效果

<Table.Column align="center" title="建筑防火信息" dataIndex="fireparams" cell={(val) => {
return val ?
  <Balloon trigger={<a style={{ cursor: 'pointer', textDecoration: 'underline' }}>查看</a>} closable={false} align="l">
    <p style={{ color: '#7e7e7e' }}>
      <strong style={{ fontWeight: 800, color: '#000' }}>建筑消防危险等级：</strong>{JSON.parse(val).danger ? JSON.parse(val).danger : '- - -'}
    </p>
    <p style={{ color: '#7e7e7e' }}>
      <strong style={{ fontWeight: 800, color: '#000' }}>建筑设计耐火等级：</strong>{JSON.parse(val).fire ? JSON.parse(val).fire : '- - -'}
    </p>
    <p style={{ color: '#7e7e7e' }}>
      <strong style={{ fontWeight: 800, color: '#000' }}>建筑设计楼层层数：</strong>{JSON.parse(val).floor ? JSON.parse(val).floor : '- - -'}
    </p>
  </Balloon> : '- - -'
}} />

获取字段数据，超出文字隐藏，鼠标移上显示全部文字

<Table.Column align="center" title="安装地址" cell={(val, i, r) => {
return <Tooltip trigger={<Button type="primary" text onClick={() => { onOpenaddress(tableData.data.list[i]) }}>查看(显示文字)</Button>} align="t">查看(鼠标移上显示)</Tooltip>
}} />

三元运算

 <Table.Column align="left" title="事件类型" dataIndex="eventtype" cell={(val) => {
  return val == 1 ? '报警事件' : val == 2 ? '隐患事件' : val == 3 ? '异常事件' : val == 4 ? '离线事件' : '- - -'
}} />