render函数渲染element-ui列表

render函数渲染element-ui列表1 创建⽣成单元格的组件
export const exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render(h, data){
const params = {
row: data.props.row,
index: data.props.index,
vm:data.parent
}
data.props.column&&(params.column = data.props.column)
return data.props.render(h, params)
}
}
2 注册组件并使⽤
<el-table :data="data">
<el-table-column
v-for="(th, key) in tableHeaders"
:key="key"
:prop="th.prop"
:label="bel"
:fixed="th.fixed"
:sortable="th.sortable?'custom':false"
:filters="th.filters"
:column-key="th.columnKey"
:filtered-value="th.filteredValue"
:filter-multiple="th.filterMultiple"
:width='th.width'
:min-width="th.minWidth"
align="center"
>
<template slot-scope="scope">
<ex-slot
v-if="th.render"
:render="th.render"
:row="scope.row"
:index="scope.$index"
:column="th"
/>
<span v-else>{{ scope.row[th.prop] || '-' }}</span>
</template>
</el-table-column>
</el-table
data:
data=[
{prop: 'userMobile',abel: '⼿机号码',width: '100px'},
{prop: 'userMobile1',label: '⼿机号码1',width: '100px'},
{prop: 'userMobile2',label: '⼿机号码2',width: '100px'},
{prop: 'userMobile3',label: '⼿机号码3',width: '100px',
render: (h, params) => {
return h('p',erName||'匿名')
}}
]。