Antdtable的封装和render的使用

目录

一、封装的意义

二、封装的步骤

三、render函数的使用

四、页面展示

五、完整代码

六、antd中td内容换行处理

        七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容

---

---

一、封装的意义

      首先要明白封装的意义是什么？封装是为了让相同的代码不必多次重写，将其封装成组件，一次书写多处调用，大大提升代码的性能，因此在遇到有相同代码的情况下，要养成良好习惯，多多封装公用组件。

二、封装的步骤

1.引入andt中的table

 2.创建column属性传入table的colums属性

1.  
   const column = [
2.  
   {
3.  
   title: '变量名',
4.  
   dataIndex: 'env_key',
5.  
   key: '1',
6.  
   width: '30%',
7.  
   editable: true,
8.  
   render: (text,) => {
9.  
   return <span>
10.  
    {text ? text :"-"}
11.  
    </span>
12.  
    }
13.  
    },
14.  
    {
15.  
    title: '变量值',
16.  
    dataIndex: 'env_value',
17.  
    key: '2',
18.  
    width: '30%',
19.  
    editable: true,
20.  
    render: (text) => {
21.  
    return <span>
22.  
    {text ? text :"-"}
23.  
    </span>
24.  
    }
25.  
    },
26.  
    {
27.  
    title: '说明',
28.  
    dataIndex: 'env_explain',
29.  
    key: '3',
30.  
    width: '25%',
31.  
    editable: true,
32.  
    render: (text) => {
33.  
    return <span>
34.  
    {text ? text :"-"}
35.  
    </span>
36.  
    }
37.  
    }
38.  
    ];

3.做空值处理

这里的“dataSource”属性的值是从外面传进来的，因此我们不知道传进来的是空数组还是有数据的数组，为了后面的值能渲染出来，我们需要多重判断。

1.  
   {value && value.length > 0 ? (
2.  
   <Table
3.  
   style={{ width: '100%', overflowX: 'auto' }}
4.  
   columns={column}
5.  
   dataSource={value}
6.  
   pagination={true}
7.  
   />
8.  
   ) : (
9.  
   <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
10.  
    )}
11.  
     
12.  
    //此段代码可以简化为一个三元运算符
13.  
    { value && value.length > 0 ? ( 1 ) :( 2 ) }
14.  
    //意思是value为真 并且 value这个数组不为空 则执行 1，否则执行2
15.  
     
16.  
     
17.  
    //为二时打印空状态
18.  
    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
19.  
    //这个也需要引入，是antd的一个ui

注意：

数组的判断空数组的方法是 数组.length > 0
对象判断空对象的方法是  Object.keys(对象).length > 0

在写完以后记得 export default  抛出。

三、render函数的使用

1.模拟一组数据

1.  
   env_management: [
2.  
   { env_key: 'LINKERD2_PROXY_LOG', env_value: 'warn,linkerd=info', env_explain: '' },
3.  
   { env_key: 'LINKERD2_PROXY_LOG_FORMAT', env_value: 'plain', env_explain: '' },
4.  
   { env_key: 'LINKERD2_PROXY_DESTINATION_SVC_ADDR', env_value: 'linkerd-dst-headless.linkerd.svc.cluster.local.:8086', env_explain: '' },
5.  
   { env_key: 'LINKERD2_PROXY_DESTINATION_PROFILE_NETWORKS', env_value: '10.0.0.0/8,100.64.0.0/10,172.16.0.0/12,192.168.0.0/16', env_explain: '' },
6.  
   { env_key: 'LINKERD2_PROXY_POLICY_SVC_ADDR', env_value: 'linkerd-policy.linkerd.svc.cluster.local.:8090', env_explain: '' },
7.  
   { env_key: 'LINKERD2_PROXY_POLICY_WORKLOAD', env_value: '$(_pod_ns):$(_pod_name)', env_explain: '' },
8.  
   { env_key: 'LINKERD2_PROXY_INBOUND_DEFAULT_POLICY', env_value: 'all-unauthenticated', env_explain: '' },
9.  
   { env_key: 'LINKERD2_PROXY_POLICY_CLUSTER_NETWORKS', env_value: '10.0.0.0/8,100.64.0.0/10,172.16.0.0/12,192.168.0.0/16', env_explain: '' },
10.  
    { env_key: 'LINKERD2_PROXY_INBOUND_CONNECT_TIMEOUT', env_value: '100ms', env_explain: '' },
11.  
    { env_key: 'LINKERD2_PROXY_OUTBOUND_CONNECT_TIMEOUT', env_value: '1000ms', env_explain: '' },
12.  
    { env_key: 'LINKERD2_PROXY_CONTROL_LISTEN_ADDR', env_value: '0.0.0.0:4190', env_explain: '' }
13.  
    ],

2.传入组件

 3.接收数据打印render函数的三个参数

•  text ：对应本次循环的列文本内容
• record：对应的本次循环的行内容
• index：对应本次循环在数组中的索引下标

4.使用render函数处理空数据

 四、页面展示

空值状态

 有值状态

五、完整代码

1.  
   /* eslint-disable camelcase */
2.  
   import {
3.  
   Card,
4.  
   Table,
5.  
   Empty
6.  
   } from 'antd';
7.  
    
8.  
   import React, { Fragment, PureComponent } from 'react';
9.  
    
10.  
    class EnvVariable extends PureComponent {
11.  
    constructor(props) {
12.  
    super(props);
13.  
     
14.  
    }
15.  
    render() {
16.  
    const { value } = this.props
17.  
    const column = [
18.  
    {
19.  
    title: '变量名',
20.  
    dataIndex: 'env_key',
21.  
    key: '1',
22.  
    width: '30%',
23.  
    editable: true,
24.  
    render: (text) => {
25.  
    return <span>
26.  
    {text ? text :"-"}
27.  
    </span>
28.  
    }
29.  
    },
30.  
    {
31.  
    title: '变量值',
32.  
    dataIndex: 'env_value',
33.  
    key: '2',
34.  
    width: '30%',
35.  
    editable: true,
36.  
    render: (text) => {
37.  
    return <span>
38.  
    {text ? text :"-"}
39.  
    </span>
40.  
    }
41.  
    },
42.  
    {
43.  
    title: '说明',
44.  
    dataIndex: 'env_explain',
45.  
    key: '3',
46.  
    width: '25%',
47.  
    editable: true,
48.  
    render: (text) => {
49.  
    return <span>
50.  
    {text ? text :"这是用render函数做的空值处理"}
51.  
    </span>
52.  
    }
53.  
    }
54.  
    ];
55.  
     
56.  
    return (
57.  
    <Fragment>
58.  
    <Card
59.  
    style={{
60.  
    marginBottom: 24
61.  
    }}
62.  
    title="环境变量"
63.  
    >
64.  
    {value && value.length > 0 ? (
65.  
    <Table
66.  
    style={{ width: '100%', overflowX: 'auto' }}
67.  
    columns={column}
68.  
    dataSource={value}
69.  
    pagination={true}
70.  
    />
71.  
    ) : (
72.  
    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
73.  
    )}
74.  
    </Card>
75.  
    </Fragment>
76.  
    );
77.  
    }
78.  
    }
79.  
     
80.  
     
81.  
    export default EnvVariable;

2022年7月13日补充

———————————————————————————————————————————

 六、antd中td内容换行处理

      今天工作时修改一个bug，在弹窗页面中展示一个表格，td中的内容过长导致超出弹窗的宽度，显示在弹窗范围以外。如图所示。

 最开始认为是表格的宽写死了，或者没有继承外部盒子100%的宽，后来发现并非如此，table表格默认一行展示，我们需要通过render函数在外层包一个盒子，设定固定的宽并让其折行显示

关键知识点：

1.使用render函数包装内容。

1.  
   columns={[
2.  
   {
3.  
   title: '变量名',
4.  
   dataIndex: 'attr_name',
5.  
   key: 'attr_name',
6.  
   align: 'center',
7.  
   render: (text) =>{
8.  
   return <div className={styles.valueStyle}>
9.  
   {text}
10.  
    </div>
11.  
    }
12.  
    },
13.  
    {
14.  
    title: '变量值',
15.  
    dataIndex: 'attr_value',
16.  
    key: 'attr_value',
17.  
    align: 'center',
18.  
    render: (text) =>{
19.  
    return <div className={styles.valueStyle}>
20.  
    {text}
21.  
    </div>
22.  
    }
23.  
    },
24.  
    {
25.  
    title: '说明',
26.  
    dataIndex: 'name',
27.  
    key: 'name',
28.  
    align: 'center',
29.  
    render: (text) =>{
30.  
    return <div className={styles.valueStyle}>
31.  
    {text}
32.  
    </div>
33.  
    }
34.  
    }
35.  
    ]}

2.使用css属性设定包装盒子的宽以及折行显示。

1.  
   .valueStyle{
2.  
   width: 234px;
3.  
   text-align: center;
4.  
   white-space:'pre-wrap';
5.  
   }

效果如下

2022年10月27日补充

---

七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容

        最近开发时遇到一个问题，就是tabs切换时，当页的定时器无法销毁，因为切换以后执行的函数是执行在切换后的页面的，而且用ref无法获取到对应的子组件的函数，也有可能是因为博主太菜，但我想到一个方法，就是销毁tabs。这就用到了“destroyInactiveTabPane”属性，这个属性在官网上并没有提供，因为影响性能。所以在万不得已的情况下才会去使用。

这篇好文章是转载于：学新通技术网