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="th.label" :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',params.row.userName||'匿名') }} ]