定义表格列的渲染逻辑：render(row) { return h(‘span‘, formatDate(row.created_at)) }

原创于 2025-06-26 16:19:32 发布 · 224 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

这是一个表格列的配置，可能是用于类似 Vue.js 的框架中定义表格列的渲染逻辑。以下是对这段代码的详细解读：

1. 表格列的基本配置

{
  title: '创建日期',
  key: 'created_at',
  width: 100,
  align: 'center',
  render(row) {
    return h('span', formatDate(row.created_at))
  },
}

title: '创建日期'：指定表格列的标题，显示为“创建日期”。
key: 'created_at'：绑定到数据对象中的字段 created_at，通常是表格数据的字段名。
width: 100：设置表格列的宽度为 100 像素。
align: 'center'：设置表格列内容居中对齐。

2. `render(row)` 方法

render(row) 是一个自定义渲染方法，用于动态生成表格单元格的内容。

参数：

row：当前表格行的数据对象。例如，如果表格数据是 [{ created_at: '2024-10-10' }, ...]，那么 row 就是 { created_at: '2024-10-10' }。

返回值：

使用 h() 函数（可能是 Vue.js 的 h 函数，用于创建虚拟 DOM 节点）生成一个 <span> 元素。
<span> 元素的内容是通过 formatDate(row.created_at) 格式化后的日期。

3. `formatDate` 函数

formatDate 是一个自定义函数，用于将日期格式化为更友好的形式。例如：

function formatDate(dateString) {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}

如果 row.created_at 是 '2024-10-10T12:34:56Z'，格式化后可能是 '2024-10-10'。

export function formatDate(date = undefined, format = 'YYYY-MM-DD') {
  return formatDateTime(date, format)
}

4. 最终效果

表格中“创建日期”列会显示格式化后的日期，而不是原始的日期字符串。

5. 完整示例

假设有以下表格数据：

const tableData = [
  { id: 1, created_at: '2024-10-10T12:34:56Z' },
  { id: 2, created_at: '2024-10-11T12:34:56Z' },
];

表格渲染后，“创建日期”列会显示：

创建日期
2024-10-10
2024-10-11

6. 总结

这段代码的作用是：

定义了一个表格列，标题为“创建日期”。
通过 render(row) 方法动态渲染单元格内容。
使用 formatDate 函数将日期格式化为更易读的形式。
最终在表格中显示格式化后的日期。

如果你使用的是 Vue.js，h() 是 Vue 的 h 函数，用于创建虚拟 DOM 节点。如果是其他框架（如 React），逻辑类似但语法会有所不同。