useView

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

Notice

This function needs to use in Base, please use this website as a plugin in a Base to see the demo.

Demo

Source

Show demo code

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>

Usage

useView returns a reactive IView object, which changes in real time according to the incoming parameters.

TIP

This function is based on getViewById implementation, because the official API are asynchronous functions, so the update of view will have a certain delay. Therefore, this function provides pending to reflect the acquisition status, which is true when the view is being acquired.

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)

Type Declarations

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>
}