iview table render中使用自定义封装的组件写法

父组件table中的render写法：

        {
          title: "TypeDefinition",
          key: "typeDefinition",
          render: (h, params) => {
            return h("div", [
              h(DynamicSelect, {
                // 自定义组件不需要要加引号
                props: {
                  // 自定义组件的属性
                  optionDataList: this.typeOptionList,
                  selectVal: params.row.typeDefinition,
                  selectSize: "small"
                },
                on: {
                  // 自定义组件事件，由子组件$emit传过来
                  select: value => {
                    params.row.typeDefinition = value;
                  }
                }
              })
            ]);
          }
        },

子组件中封装的组件写法：

<template>
  <div>
    <Select
      ref="selRef"
      v-model="selectModel"
      placeholder=""
      transfer
      clearable
      :size="selectSize"
      @on-change="select_change"
    >
      <Option
        v-for="(item, index) in optionDataList"
        :value="item.value"
        :key="index"
        >{{ item.label }}</Option
      >
    </Select>
  </div>
</template>

<script>

export default {
  name: "dynamic-select",
  props: {
    // 由父组件传过来动态渲染
    optionDataList: {
      type: Array
    },
    selectSize: {
      type: String,
      default: "default"
    },
    selectVal: {
      type: Number,
      default: -1
    }
  }
  data() {
    return {
      selectModel: this.selectVal
    };
  },
  methods: {
    // select change 事件
    select_change(opt) {
      this.$emit("select", opt);
    }
  },
};
</script>

Tips：如果需要监听click事件则 需要写nativeOn，参考https://blog.csdn.net/AcongMiss/article/details/91561963

nativeOn: {
                  click: () => {
                    // 点击详情事件
                  }
                }