vue3 for循环节点设置属性ref和获取的方式

template v-for循环渲染el-cascader组件，利用:ref="(el) => setItemRef(el, index)"动态设置ref

   <div class="info" v-for="(row, rowIndex) in item.rangeList" :key="rowIndex">
       <el-cascader
            :ref="(el) => setItemRef(el, index)"
            class="w-100%"
            v-model="item.address"
            :options="addressOptions"
            :props="{
              multiple: true,
              checkStrictly: true,
              value: 'id',
              label: 'label',
              children: 'newchildren'
            }"
            placeholder="请选择收货地址"
            @change="handleItemAddressChange($event, index)"
            filterable
            clearable
          />
   </div>

将ref存入itemRefs，获取ref时取itemRefs缓存

import { onMounted, ref, ComponentPublicInstance } from 'vue'
import { ElMessage, CascaderValue } from 'element-plus'

const itemRefs = ref<any[]>([])
const setItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
  if (el) {
    itemRefs.value[index] = el
  }
}

const handleItemAddressChange = (data: CascaderValue, index: number) => {
  if (Array.isArray(data)) {
    const textArr = itemRefs.value[index].getCheckedNodes()
  }
}