Antd中table的简单封装及render的使用
目录
一、封装的意义
二、封装的步骤
三、render函数的使用
四、页面展示
五、完整代码
六、antd中td内容换行处理
七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容
一、封装的意义
首先要明白封装的意义是什么？封装是为了让相同的代码不必多次重写，将其封装成组件，一次书写多处调用，大大提升代码的性能，因此在遇到有相同代码的情况下，要养成良好习惯，多多封装公用组件。
二、封装的步骤
1.引入andt中的table
2.创建column属性传入table的colums属性
const column = [
{
title: '变量名',
dataIndex: 'env_key',
key: '1',
width: '30%',
editable: true,
render: (text,) => {
return
{text ? text :"-"}
}
},
{
title: '变量值',
dataIndex: 'env_value',
key: '2',
width: '30%',
editable: true,
render: (text) => {
return
{text ? text :"-"}
}
},
{
title: '说明',
dataIndex: 'env_explain',
key: '3',
width: '25%',
editable: true,
render: (text) => {
return
{text ? text :"-"}
}
}
];3.做空值处理
这里的“dataSource”属性的值是从外面传进来的，因此我们不知道传进来的是空数组还是有数据的数组，为了后面的值能渲染出来，我们需要多重判断。
{value && value.length > 0 ? (
) : (
注意：
数组的判断空数组的方法是 数组.length > 0
对象判断空对象的方法是 Object.keys(对象).length > 0
在写完以后记得 export default 抛出。
三、render函数的使用
1.模拟一组数据
env_management: [
{ env_key: 'LINKERD2_PROXY_LOG', env_value: 'warn,linkerd=info', env_explain: '' },
{ env_key: 'LINKERD2_PROXY_LOG_FORMAT', env_value: 'plain', env_explain: '' },
{ env_key: 'LINKERD2_PROXY_DESTINATION_SVC_ADDR', env_value: 'linkerd-dst-headless.linkerd.svc.cluster.local.:8086', env_explain: '' },
{ 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: '' },
{ env_key: 'LINKERD2_PROXY_POLICY_SVC_ADDR', env_value: 'linkerd-policy.linkerd.svc.cluster.local.:8090', env_explain: '' },
{ env_key: 'LINKERD2_PROXY_POLICY_WORKLOAD', env_value: '$(_pod_ns):$(_pod_name)', env_explain: '' },
{ env_key: 'LINKERD2_PROXY_INBOUND_DEFAULT_POLICY', env_value: 'all-unauthenticated', env_explain: '' },
{ 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: '' },
{ env_key: 'LINKERD2_PROXY_INBOUND_CONNECT_TIMEOUT', env_value: '100ms', env_explain: '' },
{ env_key: 'LINKERD2_PROXY_OUTBOUND_CONNECT_TIMEOUT', env_value: '1000ms', env_explain: '' },
{ env_key: 'LINKERD2_PROXY_CONTROL_LISTEN_ADDR', env_value: '0.0.0.0:4190', env_explain: '' }
],2.传入组件
3.接收数据打印render函数的三个参数
- text ：对应本次循环的列文本内容
- record：对应的本次循环的行内容
- index：对应本次循环在数组中的索引下标
4.使用render函数处理空数据
四、页面展示
空值状态
有值状态
五、完整代码
/* eslint-disable camelcase */
import {
Card,
Table,
Empty
} from 'antd';
import React, { Fragment, PureComponent } from 'react';
class EnvVariable extends PureComponent {
constructor(props) {
super(props);
}
render() {
const { value } = this.props
const column = [
{
title: '变量名',
dataIndex: 'env_key',
key: '1',
width: '30%',
editable: true,
render: (text) => {
return
{text ? text :"-"}
}
},
{
title: '变量值',
dataIndex: 'env_value',
key: '2',
width: '30%',
editable: true,
render: (text) => {
return
{text ? text :"-"}
}
},
{
title: '说明',
dataIndex: 'env_explain',
key: '3',
width: '25%',
editable: true,
render: (text) => {
return
{text ? text :"这是用render函数做的空值处理"}
}
}
];
return (
{value && value.length > 0 ? (
) : (
);
}
}
export default EnvVariable;2022年7月13日补充
———————————————————————————————————————————
六、antd中td内容换行处理
今天工作时修改一个bug，在弹窗页面中展示一个表格，td中的内容过长导致超出弹窗的宽度，显示在弹窗范围以外。如图所示。
最开始认为是表格的宽写死了，或者没有继承外部盒子100%的宽，后来发现并非如此，table表格默认一行展示，我们需要通过render函数在外层包一个盒子，设定固定的宽并让其折行显示
关键知识点：
1.使用render函数包装内容。
columns={[
{
title: '变量名',
dataIndex: 'attr_name',
key: 'attr_name',
align: 'center',
render: (text) =>{
return
{text}
}
},
{
title: '变量值',
dataIndex: 'attr_value',
key: 'attr_value',
align: 'center',
render: (text) =>{
return
{text}
}
},
{
title: '说明',
dataIndex: 'name',
key: 'name',
align: 'center',
render: (text) =>{
return
{text}
}
}
]}2.使用css属性设定包装盒子的宽以及折行显示。
.valueStyle{
width: 234px;
text-align: center;
white-space:'pre-wrap';
}效果如下
2022年10月27日补充
七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容
最近开发时遇到一个问题，就是tabs切换时，当页的定时器无法销毁，因为切换以后执行的函数是执行在切换后的页面的，而且用ref无法获取到对应的子组件的函数，也有可能是因为博主太菜，但我想到一个方法，就是销毁tabs。这就用到了“destroyInactiveTabPane”属性，这个属性在官网上并没有提供，因为影响性能。所以在万不得已的情况下才会去使用。