前端 - 为什么vue2+antdv render（）创建下拉框滚动事件绑定不生效？

Question

项目中有许多form表单提交，前辈就封装了一个组件
使用动态render（）函数创建表单，对antdv 组件进行二次封装
上代码
----------------------------------正常界面，

<template>  <page-header-wrapper :title="false">    <div class="add-frame-list" style="height: 100%;">      <div class="add-frame">        <span class="title">{{ supplier_id? $t("edit")+$t('supplier') : $t("plus")+$t('supplier') }}</span>      </div>      <div class="content">        <form-container          v-if="Object.values(dictObj).length > 0"          :formParams="productInfo"          :dictObj="dictObj"          ref="formContainer"        ></form-container>        <div class="action-button">          <a-button type="primary" @click="saveData">{{ $t('save') }}</a-button>        </div>      </div>    </div>  </page-header-wrapper></template><script>import FormContainer from "@/views/common/components/FormContainer.vue";import { dictAPI } from "@/utils/dict.js";import industrialEnt from "@/mixin/industrialEnt.js";export default {  mixins: [industrialEnt],  components: {    FormContainer  },  data() {    let that = this;    return {      productInfo: {        industry_id: {          category: "customer-select",          value: undefined,          title: "产业",          require: true,          isUserDefind: true,          teledata: true,          params: {            options: []          },          events: {            change(value) {              that.changeIndustry(value,'这里正常触发，change事件');            },            popupScroll(value) {              console.log(value,'问题就在这，这里是不会触发的，我要在这里使用滚动事件，下拉框数据很多，足够触发这滚动事件');            },          }        },        ent_id: {          category: "customer-select",          value: undefined,          title: "企业",          require: true,          isUserDefind: true,          teledata: true,          params: {            options: []          },          events: {            change(value) {              // console.log(value, "***************");            }          }        }      },      dictObjCopy: {},      supplier_id: ""    };  },  computed: {    dictObj() {      if (this.industryList.length > 0 && this.industryEntList.length > 0) {        return {          ...this.dictObjCopy,          industry_id: this.dealDict(this.industryList, [            "industry_id",            "industry_name",            "org_id"          ]),          ent_id: this.dealDict(this.industryEntList, [            "ent_id",            "ent_name",            "model_class_id"          ])        };      } else {        return {};      }    }  },  created() {    this.getDict();  },  methods: {    dealDict(arr, list) {      return arr.map(item => {        return {          dic_key: item[list[0]],          dic_v1: item[list[1]],          dic_type_id: item[list[2]]        };      });    },    async getDict() {      let res = await dictAPI(["project_type_id"]);      this.dictObjCopy = res;    },  }};</script>

--------------------------- FormContainer 表单 组件

<template>  <a-form-model    :class="coverDefineClass"    ref="formContainer"    :layout="layout"    :model="formParams"    :hideRequiredMark="true"  >    <a-form-model-item      v-for="(node, name) in formParams"      :key="name"      :prop="`${name}.value`"      v-show="!node.isHiddenCurItem"      :rules="addRules(node)"      :class="{ 'holder-one-row': node.holderOneRow }"    >      <label v-if="(node.title ?node.title: '') !== ''" :title="node.title" slot="label">        {{ node.title }}        <span v-if="node.unit">({{ node.unit }})</span>        <span class="user-defind-required" v-if="node.require">*</span>      </label>      <FormsDistribution        v-bind="node"        v-model="node.value"        :class="{ 'is-view-state': isViewModel }"      ></FormsDistribution>    </a-form-model-item>  </a-form-model></template><script>import FormsDistribution from "./FormsDistribution.vue";import getTeledata from "@/utils/getTeledata";import { dealDict } from "@/utils/dict.js";let computedValueFn = null;export default {  name: "FormContainer",  components: {    FormsDistribution  },  watch: {    formParams: {      deep: true,      handler(val) {        if (!this.needComputedValue || !computedValueFn) return;        // 当需要有计算值时 计算当前功能        computedValueFn.bind(val)();      }    },    isViewModel() {      this.setViewModel();    }  },  props: {    // 序列化参数    formParams: {      type: Object,      default() {        return {};      },      required: true    },    dictObj: {      type: Object    },    // 排列方式，同Ant form 表单    layout: {      type: String,      default: "vertical"    },    // 需要计算值    needComputedValue: {      type: Boolean,      default: false    },    // 覆盖当前默认样式    coverDefineClass: {      type: String,      default: "user-defind-form"    },    // 切换至查看转态    isViewModel: {      type: Boolean,      default: false    }  },  watch: {    dictObj: {      deep: true,      handler(val, oldVal) {        this.dealObject();      }    }  },  created() {},  mounted() {    this.dealObject();  },  methods: {    dealObject() {      // 当需要远程数据填充表单数据      // 则执行相关操作      Object.keys(this.formParams).forEach(name => {        const item = this.formParams[name];        if (item.teledata) {          item.params.options = dealDict(this.dictObj[name]);        }        // 计算出当前是否有计算函数        if (item.computedValue) {          computedValueFn = item.computedValue;        }        // 如果当前为查看转态，则将每个表单置为disabled        if (this.isViewModel) {          this.setViewModel();        }      });    },    // 设置当前为查看状态，当为查看状态是，所有输入表单为不显示    setViewModel() {      Object.keys(this.formParams).forEach(name => {        const item = this.formParams[name];        if (!item.params) {          item.params = {};        }        item.params.disabled = this.isViewModel;      });    },    addRules(node) {      const temp = [];      if (node.require) {        temp.push({          required: true,          message: `${node.title}不能为空！`,          trigger: ["change", "blur"]        });      }      // 另外添加的规则      if (node.extendRule) {        temp.push(...node.extendRule);      }      return temp;    },    // 清空或填入当前表单内的数据    handleCurInputValue(rowData) {      return {        setData: () => {          Object.keys(this.formParams).forEach(name => {            this.formParams[name].value = rowData[name];          });        },        clearAllData: () => {          Object.keys(this.formParams).forEach(name => {            this.formParams[name].value = "";          });        }      };    },    // 输出当前键值对以及extraParams中额外参数数据JSON数据需要的字段    outputSaveFormater() {      let temp = {};      Object.keys(this.formParams).forEach(name => {        const node = this.formParams[name];        temp[name] = node.value;        // 如果有额外参数，直接转入传参结构数据中        if (node.extraParams) {          temp = { ...temp, ...node.extraParams };        }      });      return temp;    },    // 校验所有需要检验的数据    validAllData() {      return new Promise((resolve, reject) => {        this.$refs.formContainer.validate(valid => {          if (valid) {            const data = this.outputSaveFormater();            resolve(data);          } else {            reject(false);          }        });      });    },    // 清空所有表单内的数据    resetFormValue() {      this.$refs.formContainer.resetFields();    },    // 校验单列表单    triggerOneColumn(name) {      this.$refs.formContainer.validateField(`${name}.value`);    }  }};</script><style lang="less" scoped>.user-defind-required {  color: #f5222d;  font-family: SimSun, sans-serif;}// 查看转态下的样式.is-view-state {  background-color: #fafafa;  color: rgba(0, 0, 0, 0.85);  border: 0;  cursor: text;  /deep/ .ant-input.ant-input-disabled {    border: 0;    color: rgba(0, 0, 0, 0.85);    cursor: text;  }  /deep/ .ant-cascader-picker-arrow {    display: none;  }  /deep/ .ant-calendar-range-picker-input {    cursor: text;  }}</style>

------------------------- FormsDistribution 这个是创建组件rander函数

<!-- 根据传入表单类型，派发一个ant表单 --><script>// import Vue from "vue";export default {  name: "functionalComponents",  functional: true,  props: {    value: undefined,    category: {      type: String,      default: "",      required: true    },    params: {      type: Object,      default() {        return {};      }    },    events: {      type: Object,      default: () => {}    }  },  // a-input组件，需明确指明functional的绑定事件为 change.value  model: {    prop: "value",    // 这里好像不影响，无论怎么写好像都不对    // event: "change.value", // 最原始只有这行代码    // events: ["change","popupScroll"]  // 这行代码为了测试添加的，不生效  },  render(h, context) {    const { props, data, children, scopedSlots,listeners } = context;    console.log(props.events, data.on,'props.events 是可以输出我绑定的popupScroll 函数，但是不执行**********');    let tempParams = props.params;    // 添加上自定义事件    data.on = { ...data.on, ...props.events };    // console.log(data.on,'最终data。on 也是有我绑定的 popupScroll 函数了，是不执行的 **********');    // 如果为自定义组件，遵从预定数据格式传参，则转换prop参数类型    if ((tempParams.placeholder ?? "") === "") {      const labelTxt = props.category.match(/(select|cascader)/g)        ? "选择"        : "输入";      tempParams.placeholder = `请${labelTxt}${data.attrs.title}`;    }    if (data.attrs.isUserDefind) {      tempParams = { params: tempParams };    }    return h(      props.category,      {        ...data,        props: tempParams,        listeners,        scopedSlots      },      children    );  }};</script>

各位大佬们求指教 为什么我创建出来的下拉框，无法正确执行滚动事件，而同样创建出来的change就能触发
因为代码是前辈写的，而且找不到人，我自己对rander（）也不熟悉，求指教，已经一天了，如果在无法解决，我就得 在 FormContainer 表单 组件 中手动写各种输入框了
求大佬指教

Answer 1

<template>  <a-select v-model="selectedValue" @dropdownVisibleChange="handleDropdownVisibleChange">    <template #dropdownRender="{ menu }">      <div @scroll="handleScroll">        {{ menu }}      </div>    </template>    <a-select-option value="option1">Option 1</a-select-option>    <a-select-option value="option2">Option 2</a-select-option>     </a-select></template><script>export default {  data() {    return {      selectedValue: null    };  },  methods: {    handleDropdownVisibleChange(visible) {      if (visible) {        this.$nextTick(() => {          const dropdownMenu = document.querySelector('.ant-select-dropdown-menu');          if (dropdownMenu) {            dropdownMenu.addEventListener('scroll', this.handleScroll);          }        });      }    },    handleScroll(event) {      console.log('滚动事件触发', event);      // 处理滚动事件    }  }};</script>