Vue3中如何动态访问嵌套对象属性实现表格排序？

你的核心问题是当前排序函数无法解析嵌套属性路径字符串（比如"Category.Name"），因为a["Category.Name"]会直接查找对象中键名为Category.Name的属性，而不是先访问Category对象再获取它的Name属性。

解决方案： #

1. 点击时传递的参数保持"Category.Name"即可，问题出在属性值的获取逻辑上，不需要修改参数格式。
2. 添加一个解析嵌套属性的工具函数：

function getNestedValue(obj, path) {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : undefined;
  }, obj);
}

这个函数会把路径字符串按.拆分，逐层遍历对象获取对应属性的值，同时处理属性不存在的情况避免报错。

3. 修改排序函数，替换属性访问逻辑：

return Products.sort((a, b) => {
  const valA = getNestedValue(a, sortBy);
  const valB = getNestedValue(b, sortBy);
  // 仅对字符串类型做转小写处理，避免数字等类型被错误转换
  const aVal = typeof valA === 'string' ? valA.toLowerCase() : valA;
  const bVal = typeof valB === 'string' ? valB.toLowerCase() : valB;
  
  return aVal === bVal ? 0 : aVal > bVal ? 1 : -1;
});

额外说明： #

• 优化后的代码同时兼容一级属性（如Name、Price）和嵌套属性的排序需求。
• 增加了类型判断，避免数字类属性（比如Price）被错误转为小写，保证排序逻辑的准确性。

内容的提问来源于stack exchange，提问作者user1744582