动态渲染表格二次封装

 总体来讲操作起来也很简单，主要是能想到合适的办法。当时需求是：1、表格重复多处使用，每个表格对应的渲染数据字段和数据类型不同；2、表格针对不同列数据，渲染格式因数据而异（图片、视频、文件、评分组件、文本等）。不啰嗦直接上代码，即为记录更为分享，如有不对，请大家勿喷，直接评论指正，谢谢！

1、表格代码，关于业务逻辑方便的代码简化删除了，主要是思想方法

<el-table
      :data="tableData"
      ref="tabelRef"
      height="calc(100vh - 230px)"
      border
      fit
      :header-cell-style="{ backgroundColor: '#f5f5f5', fontSize: '12px' }"
      @selection-change="handleSelectionChange"
      @header-dragend="changeColWidth"
      @row-click="rowClick"
      @header-contextmenu="handleMouseRight"
    >     
      <el-table-column fixed type="selection" width="55" align="center">
      </el-table-column>
      <template v-for="item in props.tableCol" :key="item.index">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="100"
          :fixed="item.isFixed"
          show-overflow-tooltip
          v-if="item.isShow"
        >
          <template #header="{ column }">
           
            <div
              style="
                vertical-align: text-top;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ column.label }}
            </div>
          </template>
          <template #default="{ row }">
            <RenderColumn v-if="item.render" :render="item.render" :row="row" />
            <div v-else>{{ row[item.prop] }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>

2、表格内渲染组件

<script>
export default {
  props: {
    render: {
      type: Function,
      default: () => () => {}
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  render (h) {
    return this.render(h, this.row)
  }
}
</script>

总结：就是针对表格不位置，不同类型的数据通过不同的渲染方法，文本的话值接组件属性渲染，需要特殊处理的通过render函数，直接通过JSX渲染，有人说可以用v-html，但是当前这种方法更为灵活，尤其针对数据样式等方面的操作……