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: () => {
                    // 點擊詳情事件
                  }
                }