element表格列顺序错误

有这个场景：很多表格的列有许多一样的，所以考虑将列封装为组件

AreaAllPathColumn组件

<template>
  <div>
    <el-table-column
      :key="Math.random()"
      label="所属组织全路径"
      show-overflow-tooltip
      :prop="keyField"
    >
    </el-table-column>
  </div>
</template>

<script>
export default {
  name: 'AreaAllPathColumn',
  props: {
    keyField: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped></style>

将组件插入到所属组织列和操作列中间时，前端页面显示表格的列顺序错误。
经过多方查找资料，最后找到了解决方法：
即为每一列el-table-column添加key属性，可以使用随机数： :key=“Math.random()”

<el-table-column
          :key="Math.random()"
          prop="result.area"
          label="所属组织"
          show-overflow-tooltip
        >
        </el-table-column>
        <area-all-path-column key-field="area_all_path"></area-all-path-column>
        <el-table-column :key="Math.random()" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.result.is_savage"
              @click="_host_operation(scope.row)"
              size="small"
              >可登录终端</el-button
            >
            <el-button
              @click="_user_unlock(scope.row)"
              size="small"
              :disabled="
                scope.row.result.ds_name == 'WindowsAD' ||
                  scope.row.result.ds_name == 'DataLake'
              "
              >解锁</el-button
            >
          </template>
        </el-table-column>