element UI 动态渲染表格,其中有一列表头带有点号,无法渲染数据出来,其他的列都能渲染,

element UI 动态渲染表格,其中有一列表头带有点号,无法渲染数据出来,其他的列都能渲染,
打印数据也已经拿到,就是不渲染

:label="item"
v-for="(item,index) in tableDataFields"
show-overflow-tooltip
width="180px"
:prop="item"
:key="index"
:fixed="index == 0"
:column-key="index+''"

    >
      <template slot="header" slot-scope="scope">
        <div 
          :title="scope.column.label"
          :class="{'lightCol':curColIndex==index+''}"
        >{{scope.column.label}}div>
      template>
    el-table-column>
尝试了其他*,/都能渲染出来,是什么原因导致的

大为震惊,我竟然能模拟出你数据,并为之震撼

第一步:添加多一个插槽

img


第二步,定义方法

img


完整页面代码如下
<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column
            :label="item"
            v-for="(item,index) in tableDataFields"
            show-overflow-tooltip
            width="180px"
            :prop="item"
            :key="index"
            :fixed="index == 0"
            :column-key="index+''">
            <template slot="header" slot-scope="scope">
                <div  :title="scope.column.label">{{scope.column.label}}</div>
            </template>
            <template slot-scope="scope">
                <div  :title="scope.column.label">{{getData(scope, item)}}</div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableDataFields: [ '日.期', '姓名', '地址' ],
            tableData: [
                {
                    '日.期': "2016-05-02",
                    '姓名': "王小虎",
                    '地址': "上海市普陀区金沙江路 1518 弄",
                },
                {
                    '日.期': "2016-05-04",
                    '姓名': "王小虎",
                    '地址': "上海市普陀区金沙江路 1517 弄",
                },
                {
                    '日.期': "2016-05-01",
                    '姓名': "王小虎",
                    '地址': "上海市普陀区金沙江路 1519 弄",
                }
            ],
        };
    },
    methods: {
        getData (scope, item) {
            return scope.row[item]
        },
    },
};
</script>


tableDataFields 贴一下看看呢