首页<vxe-table style="margin-top: 30px" :checkbox-config="{ labelField: 'checkboxName' }" border :column-config="{ resizable: true }" :scroll-y="{ enabled: false }" :data="props.containerList" v-if="tabIndex == 1" id="table1" >vue3中，如何获取vxe-table的id

<vxe-table style="margin-top: 30px" :checkbox-config="{ labelField: 'checkboxName' }" border :column-config="{ resizable: true }" :scroll-y="{ enabled: false }" :data="props.containerList" v-if="tabIndex == 1" id="table1" >vue3中，如何获取vxe-table的id

时间: 2023-12-05 13:26:53 浏览: 178

在 Vue3 中，你可以通过 `ref` 获取 `vxe-table` 的实例，然后再从实例中获取 `id` 属性。首先，在模板中给 `vxe-table` 组件添加 `ref` 属性： ```html <template> <vxe-table ref="myTable" id="table1" :data="props.containerList"></vxe-table> </template> ``` 然后，在组件的 JavaScript 部分，你可以通过 `ref` 获取 `vxe-table` 的实例： ```js import { ref, onMounted } from 'vue' export default { props: ['containerList'], setup(props) { const myTableRef = ref(null) onMounted(() => { // 通过 ref 获取实例 const myTable = myTableRef.value.$xetable // 获取 id const tableId = myTable ? myTable.id : null console.log(tableId) // 输出 "table1" }) return { myTableRef } } } ``` 在 `onMounted` 钩子函数中，可以通过 `myTableRef.value.$xetable` 获取 `vxe-table` 的实例，然后从实例中获取 `id` 属性。

阅读全文