使用组件的render函数 改写el-table el-table-column

组件使用

<table-column
	className="inspect-record-table"
	align="center"
	:data="tableData"
	:highlight-current-row="false"
	:height="tableHeight"
	:tableHeader="tableHeader"
>
</table-column>
<script type="text/javascript">
  import tableColumn from "./tableColumn";
</script>

组件定义

tableColumn.vue

<script type="text/javascript">

    export default {
        name: "tableColumn",
        data() {
          return {
          }
        },
        props: {
          className: {
            type: String,
            default: ''
          },
          align: {
            type: String,
            default: ''
          },
          data: {
            type: Array,
            default: function() {
              return []
            }
          },
          height: {
            type: Number|String,
          },
          highlightCurrentRow: {
            type: Boolean,
            default: false
          },
          tableHeader: {
            type: Array,
            default: function() {
              return []
            }
          },
        },
        render(h) {
          return h('el-table',
            {
              class: this.className,
              attrs: {
                data: this.data,
                height: this.height,
                'highlight-current-row': this.highlightCurrentRow,
              },
              on: {

              }
            }, [
              this.tableHeader.map((item, index) => {
                return h('el-table-column', {
                  // inheritAttrs: false,
                  // attrs: item,
                  /* props: {
                    ...item
                  }, */
                  attrs: {
                    align: 'center',
                    ...item
                  },
                  scopedSlots: {
                      default: props => {
                        if(item['renderHTML']) {
                          return item['renderHTML'](h, props);
                        } else if(item['formatter']){
                          return item.formatter(props.row,props.column,props.row[item.prop], props.$index)
                        } else {
                          return props.row[item['prop']]
                        }
                      }
                  },
                })
              })
            ]
          )
        },
        methods: {

        }
    }
</script>
<style lang="scss">

</style>