element table 列名有. 不显示数据的bug解决

今天做项目时，测试提了一个bug，表格的列存在 . ，数据显示不出来，查看网上相关问题，发现好像是element的一个坑，开始想把 . 改成别的符号替换，后来找到了解决办法，不用改变数据就可以解决这个bug

解决方法：引入lodash的at
npm install --save lodash
import { at } from "lodash";

官网文档：
lodash.at | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)

_.at(object, [paths])

创建一个数组，值来自 object 的paths路径相应的值。

参数

1. object (Object): 要迭代的对象。
2. [paths] (...(string|string[])): 要获取的对象的元素路径，单独指定或者指定在数组中。

返回

(Array): 返回选中值的数组。

下面是例子：

//数据
const col = [a.b, a.b.c]
const tableDataList= [{a.b: 1, a.b.c: 2}, {a.b: 3, a.b.c: 4}]

<template>
  <el-table :data="tableDataList">
          <el-table-column
            v-for="item in col"
            :key="item"
            :prop="item"
            :label="item"
            show-overflow-tooltip
          />
  <el-table>
</template>

element table 列名有. 不显示数据

改为

<template>
  <el-table  :data="tableDataList">
          <el-table-column
            v-for="item in col"
            :key="item"
            :prop="item"
            :label="item"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ at(scope.row, item)[0] }}</span>
            </template>
          </el-table-column>
  </el-table>
</template>

import { at } from "lodash";
export default {
  data() {
    return {
      at
    }
  }
}

改完之后可以正常显示