ElementUI中＜el-table＞不显示列名含有点

最新推荐文章于 2024-03-28 15:31:23 发布

亻乍屯页女子白勺

最新推荐文章于 2024-03-28 15:31:23 发布

阅读量797

点赞数 2

分类专栏：杂记文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/qq_45295475/article/details/128633515

版权

杂记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

项目场景：

使用<el-table>显示列名含有.的数据。

问题描述

如果使用<el-table>的prop属性那么含有.的列将获取不到数据。

<el-table
  :data="table.colValues"
  style="width: 100%; margin-bottom: 20px"
  row-key="key"
  border
  default-expand-all
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
  <el-table-column
    v-for="(col, index) in Object.entries(table.colNames)"
    :key="index"
    :label="col[1]"
    :prop="col[0]"
    width="180"
  />
</el-table>

在这里插入图片描述

解决方案：

使用插槽进行显示：

<el-table
  :data="table.colValues"
  style="width: 100%; margin-bottom: 20px"
  row-key="key"
  border
  default-expand-all
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
  <el-table-column
    v-for="(col, index) in Object.entries(table.colNames)"
    :key="index"
    :label="col[1]"
    :prop="col[0]"
    width="180"
  >
    <template slot-scope="scope">
      {{ scope.row[col[0]] }}
    </template>
  </el-table-column>
</el-table>