"element-ui" table How to change empty cells as '-'. - vue.js

Question

var Main = {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: '',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: '',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.4.11/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.4.11/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180">
</el-table-column>
<el-table-column prop="name" label="Name" width="180">
<template slot-scope="scope">
{{scope.row.name || '-'}}
</template>
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</template>
</div>
I know If I use 'template' tag I can convert null data as '-'.
now let's suppose that I have more than 100 tables and I don't know which cells can be null. putting 'template' to all el-table-columns will be very hard work and inefficient way.
I want to know is there any way that I can change empty cells as '-' at the same time. help me guys
jsfiddle

Answer 1

Just :
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180">
</el-table-column>
<el-table-column prop="name" label="Name" width="180">
<template slot-scope="scope">
<!-- Replace empty cell by '-' --->
<div class="cell" v-if="scope.row.name !== null">{{ scope.row.answer }}</div>
<div v-else class="cell">-</div>
</template>
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>

Answer 2

I'm sure there are many ways to achieve that. But try this:
computed: {
items() {
let data = this.tableData;
for(let item of data) {
for(let key in item) {
if (!item[key]) {
item[key] = '-';
}
}
}
return data;
}
}
<template>
<el-table :data="items" style="width: 100%">
<! -- the rest of the content -->