Как динамически отрисовать значения в таблице

Question

у меня есть таблица которая заполняется при переборе приходящих данных

0: {date: "2021-06-18", avgPrice: "0.05", avgWifiPrice: "0", avgOperatorPrice: "0.1", priceSum: "0.3",…}
1: {date: "2021-06-16", avgPrice: "0.05", avgWifiPrice: "0", avgOperatorPrice: "0.1", priceSum: "0.4",…}
2: {date: "2021-06-15", avgPrice: "0.5", avgWifiPrice: "0", avgOperatorPrice: "1", priceSum: "4",…}

вместо поля date может быть поле montch или operator, всего 14 разных значений остальное одинаковые. как в первом столбце выводить соответствующее поле в зависимости от того что пришло. Сейчас я использую следующий код для того что бы динамически менять заголовок столбца

titleGroupTable: function () {
        let arr = {};
        for(let items of this.tableStatisticList) {
          if('date' in items) {
            arr['value'] = items.date;
            arr['name'] = 'День';
            continue;
          }
          if('month' in items) {
            arr['value'] = items['month'];
            arr['name'] = 'Месяц';
            continue;
          }
          if('hour' in items) {
            arr['value'] = items['hour'];
            arr['name'] = 'Час';
            continue;
          }
          if('minute' in items) {
            arr['value'] = items['minute'];
            arr['name'] = 'Минуты';
            continue;
          }
          if('operator' in items) {
            arr['value'] = items['operator'];
            arr['name'] = 'Оператор';
            continue;
          }
          if('user' in items) {
            arr['value'] = items['user'];
            arr['name'] = 'Партнер';
            continue;
          }
          if('country' in items) {
            arr['value'] = items['country'];
            arr['name'] = 'Страна';
            continue;
          }
          if('platform' in items) {
            arr['value'] = items['platform'];
            arr['name'] = 'Платформа';
            continue;
          }
          if('browser' in items) {
            arr['value'] = items['browser'];
            arr['name'] = 'Браузер';
            continue;
          }
          if('brand' in items) {
            arr['value'] = items['brand'];
            arr['name'] = 'Бренд';
            continue;
          }
          if('browser_language' in items) {
            arr['value'] = items['browser_language'];
            arr['name'] = 'Язык браузера';
            continue;
          }
          if('site' in items) {
            arr['value'] = items['site'];
            arr['name'] = 'Сайт';
            continue;
          }
          if('campaign' in items) {
            arr['value'] = items['campaign'];
            arr['name'] = 'Кампания';
            continue;
          }
          if('ip' in items) {
            arr['value'] = items['ip'];
            arr['name'] = 'Ай-пи';

          }
        }
        return arr;
      },

это computed свойство, так вывожу таблицу

 <thead>
            <tr>
              <th scope="col">{{ titleGroupTable.name }}</th>
              <th scope="col">Кликов</th>
              <th scope="col">Кликов wifi</th>
              <th scope="col">Кликов операторов</th>
              <th scope="col">Показов</th>
              <th scope="col">ctr</th>
              <th scope="col">Ср.цена</th>
              <th scope="col">Ср.цена wifi</th>
              <th scope="col">Ср.цена опер.</th>
              <th scope="col">Оборот</th>
              <th scope="col">Профит</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableStatisticList" :key="index">
              <th>{{ titleGroupTable.value }}</th>
              <th>{{ item.clickSum }}</th>
              <th>{{ item.clickWifiSum }}</th>
              <th>{{ item.clickOperatorSum }}</th>
              <th>{{ item.showSum }}</th>
              <th>{{ item.ctr }}</th>
              <th>{{ item.avgPrice }}$</th>
              <th>0</th>
              <th>{{ item.avgOperatorPrice }}</th>
              <th>{{ item.priceSum }}</th>
              <th>{{ item.profitSum }}</th>
            </tr>
          </tbody>

но в titleGroupTable.value записывается только последнее значение.

Answer 1

При общем индексе (тут его переменная названа index) в итерации v-for:

Разметка ячейки заголовка

<th scope="col">{{ firstKnownFields[index].name }}</th>

Разметка ячейки в теле таблицы

<td>{{ firstKnownFields[index].value }}</td>

И, в коде компонента - вычисляемое свойство на базе статичного словаря заголовков

// ...
computed: {
  firstKnownFields() {
    const knownFieldsKeys = Object.keys(this.$options.columnTitles);
    return this.tableStatisticList.map(item => {
      const keyName = knownFieldsKeys.find(k => item.hasOwnProperty(k));
      if (!keyName) throw new Error('Не найдено известного свойства в ' + JSON.stringify(item));
      return {
        name: this.$options.columnTitles[keyName],
        value: item[keyName],
      };
    });
  },
  // ...
},
// ...
created() {
  this.$options.columnTitles = {    // в $options - для возможности переиспользования везде в компоненте, и без ненужной реактивности
    date: 'День',
    month: 'Месяц',
    hour: 'Час',
    // ...(все что между hour и ip)
    ip: 'Ай-пи',
  };
  // ...
},
// ...

БЛОГ НА HUSL

Как динамически отрисовать значения в таблице

Ответы (1 шт):