表格组件扩展

组件库

组件库

• MDF内嵌了tinper-bee和antd两套UI库供大家进行基于两个库组件进行二次扩展封装以达到特色化需求
• 可以通过查看UI库官网查看基本的样式，然后基于MDF的gridModel进行和基础组件的结合扩展开发

以antd组件库的进度条为例

原组件库进度条地址

• antd组件库-进度条
• 可以参考基础的实现效果，来写自己的代码。（注意区分MDF内嵌的antd组件库的版本）

图 1

目标

在table表格中，自定义列展示扩展的组件，扩展的组件可以根据表格返回的内容以及配置的属性来展示自定义的列UI样式，并实现根据实体元数据设置列的数据展示

创建文件

src/web/common/extends/formatter/ 下创建 myProgress.jsx

图 2

进度条progress查看官方文档原厂使用方法以及支持扩展的API属性和方法

图 3

/**
*
* @title 基础 Progress
* @description percent 标记当前进度
* @description status 标记当前状态
*/

import { Progress } from 'antd';

ReactDOM.render(
  <>
    <Progress percent={30} />
    <Progress percent={50} status="active" />
    <Progress percent={70} status="exception" />
    <Progress percent={100} />
    <Progress percent={50} showInfo={false} />
  </>,
  mountNode,
);

扩展myProgress扩展组件代码

• 引入antd的Progress组件
• 为了保持组件的可复用性，最好把传入的props属性值定义成固定属性字段和方法，实现高内聚低耦合
• 扩展表格内组件，获取表格数据，需要在外部把rowData、rowInfo传进来

/**
*
* @title 基础 Progress
* @description size        标记进度条长度大小
* @description percent     标记进度条百分比
* @description showInfo    标记是否显示进度数值或状态图标
* @description type        标记进度条类型，可选 line线性 circle圆圈 dashboard仪表板
* @description strokeWidth 标记进度条线的宽度，单位 px
* @description formatName  标记进度条自定义文字格式
* @description status      标记进度条状态 可选：success exception normal active(仅限 line)
* @description width       标记圆形进度条画布宽度，单位 px
* @description gapDegree   标记仪表盘进度条缺口角度，可取值 0 ~ 295
* @description gapPosition 标记仪表盘进度条缺口位置
*/

import React from 'react';
import {Progress} from 'antd';
import PropTypes from 'prop-types';

const propTypes = {
    //进度条大小
    size: PropTypes.oneOf(['', 'small']),
    //百分比
    percent: PropTypes.number,
    //是否显示进度数值或状态图标
    showInfo:PropTypes.bool,
    //类型，可选 line线性 circle圆圈 dashboard仪表板
    type:PropTypes.oneOf(['line', 'circle','dashboard']),
    //进度条线的宽度，单位 px
    strokeWidth: PropTypes.number,
    //自定义文字格式
    formatName:PropTypes.string,
    /**
        * type="line"
    */
    //进度条状态 可选：success exception normal active(仅限 line)
    status: PropTypes.oneOf(['','success', 'exception','normal','active']),
    /**
        * type="circle"
    */
    //圆形进度条画布宽度，单位 px
    width:PropTypes.number,
    /**
        * type="dashboard"
    */
    //仪表盘进度条缺口角度，可取值 0 ~ 295
    gapDegree:PropTypes.number,
    //仪表盘进度条缺口位置
    gapPosition:PropTypes.oneOf(['top','bottom','left','right'])
};

const defaultProps = {
    percent:0,
    size: 'small',
    type: 'line',
    formatName:'%'
};

function MyProgress(props){
    const {
        model,
        rowData,
        rowInfo,
        type,
        percent,
        formatName,
        ...others
      }=props;
    return (<Progress 
                percent={parseFloat(percent)}  
                type={type}
                format={percent => `${percent}${formatName}`}
                {...others}
            />)

}
MyProgress.propTypes = propTypes;
MyProgress.defaultProps = defaultProps;
export default MyProgress;

注册组件

src/web/common/extends/formatter/index.jsx

图 4

export MyProgress from './myProgress';

扩展组件使用

表格内自定义列使用方法，需要先获取表格的girdModel对象，然后调用表格设置列状态方法setColumnState()，实现自定义列展示扩展组件

图 5

效果展示

图 6

组件封装的建议

• 1、无状态组件要用函数式封装方式进行封装组件
• 2、组件接收的属性props需要用propTypes或者结合TS数据特性，进行数据类型验证
• 3、使用React HOOKS方式进行扩展