【笔记】vue3.2 给循环的元素加ref

其实这个题目在vue的文档中已经了讲过了。

想看官方文档的请点击：官方解决方案

本文主要内容是结合element-plus中的el-table，给el-table-column中的元素设置ref，上例子。

<script setup>
import { ref, nextTick, onMounted } from 'vue'

const columnRefs = []
const setColumnRefs = (el) => {
  if (el) {
    columnRefs.push(el)
  }
}
const getColumnRefs = () => {
  // 查看columnRefs的值是否正确
  console.log(columnRefs)
}

const tableData = ref([])
const initTableData = () => {
  getDataApi().then((res) => {
    tableData.value = res.list
    // 如果明确知道什么时候table中的数据会变化，那么就在这个时候清空columnRefs
    // 为了避免翻页时导致columnRefs中的内容不正确
    columnRefs = []
    nextTick(() => {
      getColumnRefs()
    })
  })
}

onMounted(() => {
  initTableData()
})
</script>

<template>
  <el-table :data="tableData">
    <el-table-column label="操作">
      <template #default="scope">
        <div :ref="setColumnRefs">{{ scope.row.xx }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>