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

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

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

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

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

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

<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-table-column, они, похоже, больше не будут работать так, как ожидалось, и будут вести себя так, как описано выше.


vue.js vue-component element-ui
person Nutty    schedule 09.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема заключается в том, как 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>

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

person Nutty    schedule 13.06.2019