useTable

• Category: Composables
• Relate: getTable
• Dependencies: @lark-base-open/js-sdk
• Last Changed: yesterday

提示

该函数需要在一个多维表格中使用，请将本文档作为一个插件在多维表格上使用以查看演示。

演示

Source

显示演示代码

demo.vue

<script setup lang="ts">
import { useTable, useSelection } from "@qww0302/use-bitable"
import { ref, watch } from "vue"

const { tableId } = useSelection()
const { table, pending } = useTable(tableId)
const name = ref()

watch(
  () => table.value,
  (t) => {
    name.value = null
    if (t) {
      t.getName().then(res => {
        name.value = res
      })
    }
  }
)

</script>

<template>
  <div class="tip custom-block">
    <p class="custom-block-title">
      TIP
    </p>
    <p>Choose different table</p>
  </div>
  <div>
    Table name:
    <span v-if="!pending && name">{{ name ?? "null" }}</span>
    <span v-else-if="pending || !name">loading table...</span>
  </div>
</template>

用法

useTable 返回的 table 为响应式的 ITable 对象，实时根据传入的参数变化。传入的值可以为 table 的 id 或者 name。

TIP

该函数是基于 getTable 实现的，由于官方的 API 均为 异步函数，所以 table 的更新会有一定延迟。因此，该函数提供了 pending 来反映获取状态，为 true 时则正在获取 table。

import {useTable} from "@qww0302/use-bitable"
import { ref } from "vue"

const tableId = ref<string | null>(null)

const { table, pending } = useTable(tableId)

类型声明

import { MaybeRefOrGetter } from "vue"
import { ITable } from "@lark-base-open/js-sdk"
/**
 * Reactive table
 *
 * 响应式表格
 *
 * @param tableIdOrName
 * @returns
 */
export declare function useTable(
  tableIdOrName: MaybeRefOrGetter<string | null>,
): {
  table: import("vue").ShallowRef<ITable | null>
  pending: import("vue").Ref<boolean, boolean>
}