企业网站手机端太简洁网站开发建设方案

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

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

        在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。通过这种自定义的渲染方式，我们可以将原本分散在数据对象中的最小值和最大值，以一种直观且符合需求的方式展示在表格中。

        下面是前端界面展示效果