你知道element中el-table的列名中不能含有" . "吗？

[本文出自天外归云的博客园]

Vue+element比较流行，但是element有个坑，就是element的表格列名中不能含有点儿" . "，否则数据都显示不出来。

在element里表格是这样写的：

<template>
  <el-table :data="rows">
    <el-table-column v-for="column in columns" :key="column" :label="column" :prop="column">
    </el-table-column>
  </el-table>
</template>

在vue里rows和columns是这样的：

export default {
  data() {
    return {
        columns:['a.b','c.d','e.f']
        rows:[
            'a.b':'333',
            'c.d':'333',
            'e.f':'333',
        ]
    }
}

解决方法就是把column中的" . "和row[key]中的" . "全都替换成其他符号，比如" _ "：

var new_columns = []
for (const column of columns) {
  let new_column = column.replace('.', '_')
  while (new_column.indexOf('.') !== -1) { new_column = new_column.replace('.', '_') }
  new_columns.push(new_column)
}
this.columns = new_columns

var new_rows = []
for (const row of rows) {
  var new_row = {}
  for (const key in row) {
    let new_key = key.replace('.', '_')
    while (new_key.indexOf('.') !== -1) { new_key = new_key.replace('.', '_') }
    new_row[new_key] = row[key]
  }
  new_rows.push(new_row)
}
this.rows = new_rows

以上也是JavaScript中替换字符串数组和json数组中元素中所包含指定字符的方法。