Как преобразовать столбцы таблицы в другой компонент? - PullRequest
Новая
       31

Как преобразовать столбцы таблицы в другой компонент?

4 голосов
/ 09 июня 2019

У меня есть таблица, написанная на vue / element-ui.В этой таблице есть повторяющиеся столбцы, которые я пытаюсь преобразовать в различные компоненты для повторного использования.Когда я пытаюсь выполнить рефакторинг, я получаю одну из нескольких ошибок:

  1. При выборе параметра раскрывающиеся списки не обновляются вообще.
  2. Различные раскрывающиеся списки ведут себя так, как если бы они были едины.Это означает, что они обновляются, чтобы всегда быть одним и тем же параметром

Поскольку у меня есть дубликаты столбцов, и потому что я должен отслеживать значения, которые они имеют для аутсорсинга, компонент имеет смысл для меня.Поэтому я попытался передать на аутсорсинг весь столбец родительской таблицы или только отдельные дочерние столбцы, заключенные в div.

Я также попытался использовать селекторы в своей области видимости, что дает мне вторую ошибку, написанную выше.Я думал о том, что каждый из них может быть выбран в своем собственном компоненте, но тогда мне придется генерировать события всякий раз, когда они изменяются, для обновления текстового поля, а сейчас просто было бы просто связать все вместе в другом компоненте.

Это базовый код для таблицы: 

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="Initial Risk">
        <Calc/>
      </el-table-column>
      <el-table-column label="Residual Risk">
        <Calc/>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Calc from "./Calc.vue";
export default {
  components: {
    Calc
  },
  data() {
    return {
      tableData: [{}, {}]
    };
  }
};
</script>

Это базовый код для Calc-компонента: 

<template>
  <div>
    <el-table-column></el-table-column>
    <el-table-column label="Severity" width="100">
      <template slot-scope="scope">
        <el-select
          placeholder="Select"
          v-model="scope.row.severitySelect"
        >
          <el-option
            v-for="severity in severities"
            :key="severity"
            :label="severity"
            :value="severity"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
  </div>
</template>

<script>
export default {
  data() {
    return {
      severities: ["negligible", "minor", "major", "severe", catastrophic"]
    };
  }
};
</script>

Вы можете найти более полный пример множественного выбора иполе ввода здесь: https://codesandbox.io/s/vueelementui-ymgi0

Теперь я ожидал, что каждый компонент будет управлять своими собственными данными, но как только выборки будут помещены в столбец el-таблицы, они, похоже, уже не будут работать так, как ожидалось, и будут вести себя какобъяснено выше.

1 Ответ

1 голос
/ 13 июня 2019

Проблема заключается в том, как element-ui обрабатывает таблицы.В этом случае одна строка использует ту же область.И поскольку два одинаковых компонента в строке используют одну и ту же область видимости, они были связаны, как в задаче.

Я исправил это, динамически создавая переменные в области видимости с помощью подпорки, которая получается изродитель и должен быть другим.Мои компоненты теперь выглядят так:

компонент таблицы: 

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="Initial Risk">
        <Calc column-group="initial"/>
      </el-table-column>
      <el-table-column label="Residual Risk">
        <Calc column-group="initial"/>
      </el-table-column>
    </el-table>
  </div>
</template>

и для компонента calc: 

<template>
  <div>
    <el-table-column></el-table-column>
    <el-table-column label="Severity" width="100">
      <template slot-scope="scope">
        <el-select
          placeholder="Select"
          v-model="scope.row[scope.$index.toString() + columnGroup + 'severity']"
        >
          <el-option
            v-for="severity in severities"
            :key="severity"
            :label="severity"
            :value="severity"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
  </div>
</template>

<script>
export default {
  data() {
    return {
      severities: ["negligible", "minor", "major", "severe", catastrophic"]
    };
  },
  props: {
    columnGroup: {
      type: String,
      required: true
    }
  }
};
</script>

Нужно только убедиться, что столбецгруппа уникальна.

...