表格columns拼接两个后端返回的字段（以umi框架为例）

在用组件对前端项目进行开发时，我们会遇到以下情况：项目原型中有取值范围这个表字段，需要存放最小取值到最大取值。

而后端返回给我们的数据是返回了一个最小值和一个最大值，

在columns中我们需要对这两个字段进行拼接，使其在前端界面展示成min-max的样式。下面是我的columns字段配置方式。

const columns = [
    {
         title: '取值范围',
         dataIndex: 'minmax',
         hideInSearch: true,
         render: (text, a) => {
             console.log(text, a);
             return <span>{a.min}-{a.max}</span>
         }
     },
]

render 属性是这段代码中最为关键和灵活的部分。它是一个函数，用于自定义这一列每一行数据的渲染方式。这个函数接收两个参数：

• text ：通常情况下，它应该是 dataIndex 对应字段的值。但在我们这个自定义渲染的例子中， text 的值可能并非我们最终想要展示的内容，它在这里的作用相对有限。
• a ：这个参数代表当前行的数据对象。它包含了当前行所有字段及其对应的值，就像是一个包含了整行数据信息的小包裹。

在函数内部，首先使用 console.log(text, a) 打印出 text 和当前行的数据对象 a 。这一步在开发调试过程中非常有用，我们可以通过控制台输出，清晰地查看传入的参数值，了解数据的具体情况，以便及时发现和解决可能出现的问题。

接着，函数返回一个 <span> 元素，其内容为 {a.min}-{a.max} 。这意味着在表格中 “取值范围” 这一列的每一行，都会将当前行数据对象中的 min 字段值和 max 字段值用连字符 - 连接起来进行显示。例如，如果某一行数据对象中 min 的值为 10 ， max 的值为 20 ，那么在表格的这一行 “取值范围” 列中，就会显示 10 - 20 。通过这种自定义的渲染方式，我们可以将原本分散在数据对象中的最小值和最大值，以一种直观且符合需求的方式展示在表格中。

下面是前端界面展示效果