Vue中v-table仅在指定行/td渲染数组元素的问题及解决

我是Vue.js新手，实现了一个按当月天数（29-31行）展示的v-table，每行包含日期、星期、人员三列。通过后端请求获取21条人员数据，存入计算属性filteredPersons数组中。需求是仅在非周末/非节假日的日期行的人员列显示对应人员（通过isWeekendOrHoliday(n)判断是否为周末/节假日），但当前代码中，若日期n是周末/节假日，filteredPersons[n]不显示，n继续递增，导致数组中部分人员永远无法展示。

原代码 #

<v-table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Weekday</th>
        <th>Person</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="n in dIM" :key="n" :class="{greyRow: isWeekendOrHoliday(n) === true}">
      <td class="tf">{{n}}</td>
        <td class="tf">{{getWeekdays(n)}}</td>
      <td>
        <span v-if="!isWeekendOrHoliday(n)">
            {{filteredPersons[n]}}
        </span>
      </td>
    </tr>
    </tbody>
</v-table>

解决方法 #

通过重新构建计算属性，将人员数据与工作日日期一一对应，实现所有人员都能在工作日行展示：

• 从后端数据中提取人员数组
• 筛选出当月所有工作日日期
• 将人员数组与工作日数组合并为以日期为键、人员为值的对象
• 模板中通过日期直接匹配对应人员

修改后的计算属性代码：

filteredPersons() {
        let persons = []
        let weekdays = []
        // 提取后端返回的人员数据
        for (let i = 0; i < 32; i++) {
          if (this.data[`${this.year}_0${this.month+1}`] && this.data[`${this.year}_0${this.month+1}`].hasOwnProperty(i)) {
            persons.push(this.data[`${this.year}_0${this.month+1}`][i])
          }
        }
        // 筛选当月的工作日日期
        for (let i = 1; i < this.dIM+1; i++) {
            if (!this.isWeekendOrHoliday(i)) {
              weekdays.push(i)
            }
        }
        // 建立工作日日期与人员的对应关系
        const weekdaysAndPersons = {};
        weekdays.forEach((day, index) => {
          weekdaysAndPersons[day] = persons[index % persons.length];
        });
        return weekdaysAndPersons
      }

模板中人员列的代码：

<td>
    <span v-if="!isWeekendOrHoliday(n)">
        {{filteredPersons[n]}}
    </span>
</td>

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