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||'匿名')
        }}
]