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

Question

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

打印数据也已经拿到，就是不渲染

<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"
          :class="{'lightCol':curColIndex==index+''}"
        >{{scope.column.label}}</div>
      </template>
    </el-table-column>

尝试了其他*，/都能渲染出来，是什么原因导致的

Answer 1

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

第一步：添加多一个插槽

第二步，定义方法

完整页面代码如下

<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>