vue element table 传入自定义的table column item

Z时代
2024-02-28
分类：IT

后台管理vue cli项目，使用的是vue-admin-template，vue-elment模板
由于项目中需要大量使用el-table，所以想做一个table的组件，目前遇到一个渲染column的问题

就是表格的列显示的内容可能是自定义的html，所以需要用到template插槽，我通过div绑定v-html渲染html但是这个变量内无法接收elment的组件，并且渲染的class还需要穿透，比较麻烦。
于是我定义了一些默认的template，例如需要渲染el-tag，以及一些列可能是用户的头像，但是着三者之间好像有冲突。
请问有没有比较好的解决方案呢？

 <el-table-column
                    v-for="(item,index) in columns"
                    :key="index"
                    :label="item.label || ''"
                    :align="item.align || 'center'"
                    :prop="item.prop"
                    :width="item.width || 100"
                    :show-overflow-tooltip="item.showOverflowTooltip || true"
                    :class-name="item.class || ''"
                    :formatter="item.formatter"
                >
                    <template v-if="item.avatar || false" v-slot="{ row }">
                        <el-avatar size="large" :src="assets + row[item.avatar]"></el-avatar>
                    </template>
                    <template v-if="item.tag || false" v-slot="{ row }">
                        <el-tag :size="item.tag(row).size || 'small'" :color="item.tag(row).color || ''">{{ item.tag(row).text }}</el-tag>
                    </template>
                    <template v-if="item.template || false" v-slot="{ row }">
                        <div v-html="item.template(row)"></div>
                    </template>                </el-table-column>

回答：

直接在columns里面手写render方法或者JSX

{
    title: 'title',
    prop: 'prop',
    render (h, params) {
    const { row, column, index } = params;
    //自定义组件
      return <customTemplate :row="row" :column="column" :index="index"  ></customTemplate>
    }  },

然后写一个把render方法转换成template-slot写法的functional组件，并且注册

export default {
  name: 'renderTemplate',
  functional: true,
  props: {
    render: Function,
    index: Number,
    scope: Object
  },
  render: (h, ctx) => {
    const { row, column } = ctx.props.scope
    column.key = column.property
    const index = ctx.props.scope.rowIndex
    const params = { row, column, index }
    return ctx.props.render(h, params)
  }}

//vue
{
 components:{renderTemplate}}

 <el-table-column v-for="col in columns" :key="col.prop">
 <template
      v-if="typeof col.render === 'function' && !col.type"
      v-slot:default="scope"
    >
      <renderTemplate
        :render="col.render"
        :scope="scope"
        :index="index"
      />
    </template> </el-table-column>