今天做项目时，测试提了一个bug，表格的列存在 . ，数据显示不出来，查看网上相关问题，发现好像是element的一个坑，开始想把 . 改成别的符号替换，后来找到了解决办法，不用改变数据就可以解决这个bug
解决方法：引入lodash的at
npm install --save lodash
import { at } from "lodash";
官网文档：
lodash.at | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)
_.at(object, [paths])
创建一个数组，值来自 object 的paths路径相应的值。
参数
-
object(Object): 要迭代的对象。 -
[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
}
}
}
改完之后可以正常显示
