Question

我有一个用vue / element-ui编写的表。该表有重复的列，我尝试将其重构为不同的组件以供重用。当我尝试重构时，出现以下错误之一：

选择一个选项时，下拉列表根本不会更新。
不同的下拉菜单的行为就像是一个下拉菜单。表示它们更新为始终相同的选项

因为我有重复的列，并且因为我必须跟踪值，所以我将组件外包给我很有意义。因此，我尝试将整个父级表列或仅单个子列外包给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-table-column中后，它们似乎不再能按预期运行，并且行为如上所述。

Answer 1

问题来自element-ui如何处理表。在这种情况下，一行使用相同的范围。并且由于连续的两个相同组件使用相同的作用域，因此它们像问题中那样被链接。

我通过在prop的帮助下在作用域中动态创建变量来解决该问题，该变量来自父级并且必须不同。我的组件现在看起来像这样：

表组件：

<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>

只需要确保列组道具是唯一的即可。

如何将表列重构为不同的组件？

1 个答案: