灵感来源 https://www.dazhuanlan.com/2019/10/07/5d9a906dc5c9f/
<template>
<el-table
v-bind="$attrs"
v-on="$listeners"
style="width: 100%">
<table-column v-for="(val, index) in ($attrs.column || [])" :value="val" :key="index"/>
</el-table>
</template>
<script>
export default {
// 核心点
inheritAttrs: false,
components: {
'table-column': {
props: {
value: {
required: true,
type: Object,
default: () => ({})
}
},
render: function (h) {
const attrs = this.value
if (attrs.type) {
return (
<el-table-column {...{attrs}}/>
)
}
return (
<el-table-column
{...{attrs}}
scopedSlots={
{
default: ({row, column, $index}) => {
return this.value.render ? this.value.render(h, {row, column, $index}) : row[column.property]
}
}}>
</el-table-column>
)
}
}
}
}
</script>
{
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
column: [{
label: 'Date',
prop: 'date'
}, {
label: 'Name',
prop: 'name',
render (h, {row, column, $index}) {
const {name, address} = row
return (
<div style="color: red">
{name + '------*****-----' + address}
</div>
)
}
}]
}