Vue中setFieldValue自动按键排序问题：CSV导入后表格展示顺序不符预期

嘿，我明白你现在的困扰——明明代码里是按「Comments、Start Date、End Date」的顺序添加内容，结果UI里却变成了「Comments、End Date、Start Date」，对吧？这问题其实出在数据结构的顺序保障上，咱们来一步步解决它。

为啥会乱序？ #

你代码里声明了getDetail是数组，但如果你的setFieldValue函数其实是在给这个数组当对象用（比如直接给它加属性getDetail['Comments'] = xxx），那它本质上就变成了一个类数组对象。JS里对象的键在遍历的时候，有时候会自动排序（尤其是旧环境或者某些UI组件的遍历逻辑），这就导致顺序跑偏了。

直接有效的修复方案 #

咱们把getDetail改成存有序对象的数组，这样v-for遍历的时候就会严格按照你添加的顺序来渲染：

getArray(row) { 
  let getDetail = [] 
  // 严格按你想要的顺序往数组里加元素
  if (row['comment'].trim().length > 0) { 
    getDetail.push({ label: 'Comments', value: row['comment'] }) 
  } 
  if (row['start'].trim().length > 0) { 
    getDetail.push({ label: 'Start Date', value: this.dateFormat(row['start']) }) 
  } 
  if (row['end'].trim().length > 0) { 
    getDetail.push({ label: 'End Date', value: this.dateFormat(row['end']) }) 
  } 
  return getDetail 
}

然后在你的UI表格里，遍历这个数组就行：

<!-- 举个例子，表格的渲染逻辑大概是这样 -->
<tr v-for="item in getArray(yourRowData)" :key="item.label">
  <td>{{ item.label }}</td>
  <td>{{ item.value }}</td>
</tr>

要是不想改太多原代码？ #

那你可以调整setFieldValue函数，让它负责往数组里push有序的对象，而不是给数组加属性：

setFieldValue(arr, fieldLabel, fieldValue) {
  arr.push({ label: fieldLabel, value: fieldValue })
}

这样你的原getArray函数完全不用改，只换个setFieldValue的实现，就能保证顺序正确啦。

原理说一下 #

数组的元素顺序是完全按照你插入的顺序保存的，v-for遍历数组的时候会从第一个元素开始依次渲染，绝对不会乱序。但如果用对象存键值对，哪怕ES6+之后对象键会保留插入顺序，在一些特殊场景下还是可能出问题，用数组就稳多了。

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