问题如下:
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="date."
label="日期"
width="180"
:formatter="getprop"
>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
tableData: [
{
'date.': '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
'date.': '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
'date.': '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
'date.': '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
},
methods: {
getprop(row, column, cellValue, index) {
console.log(row, column, cellValue, index)
return row[column.property]
}
}
})
如上图所示,上面prop绑定的日期date带了一个.导致渲染不出来,如何解决这个问题呢,利用ele提供的formatter属性,注册一个方法,该方法可以获取到注册方法的那个属性的行和列还有值和下标,注意注册一定是在想要改变的属性那一行去注册,而不是给整个表格注册,然后就可以去打印获取到对应的值,用return去将属性对应的值返回出来