useView

• Category: Composables
• Relate: getTablegetViewById
• Dependencies: @lark-base-open/js-sdk
• Last Changed: 2 weeks ago

提示

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

演示

Source

显示演示代码

demo.vue

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

const { tableId, viewId } = useSelection()
const { view } = useView(tableId, viewId)
const name = ref()
const type = ref()
const meta = ref()

watch(
  () => view.value,
  (v) => {
    name.value = "Loading..."
    type.value = "Loading..."
    meta.value = "Loading..."
    if (v) {
      Promise.all([
        v.getName().then((res) => (name.value = res)),
        v.getType().then((res) => (type.value = res)),
        v.getMeta().then((res) => (meta.value = res)),
      ])
    }
  }
)

</script>

<template>
  <div class="tip custom-block">
    <p class="custom-block-title">
      TIP
    </p>
    <p>Choose different view</p>
  </div>
  <div>
    Current View:
    <ul>
      <li>viewId: {{ view?.id }}</li>
      <li>tableId: {{ view?.tableId }}</li>
      <li>type: {{ type }}</li>
      <li>
        meta:
        <pre>{{ JSON.stringify(meta, null, 2) }}</pre>
      </li>
    </ul>
  </div>
</template>

用法

useView 返回的 view 为响应式的 IView 对象，实时根据传入的参数变化。

TIP

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

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

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

const { view, pending } = useView(tableId, viewId)

类型声明

import { MaybeRefOrGetter } from "vue"
import type { ITable, IView } from "@lark-base-open/js-sdk"
export declare function useView(
  table: MaybeRefOrGetter<ITable | string | null>,
  viewId: MaybeRefOrGetter<string | null>,
): {
  view: import("vue").ShallowRef<IView | null>
  pending: import("vue").Ref<boolean>
}