useSelection

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

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 { useSelection } from "@qww0302/use-bitable"

const {
  baseId,
  recordId,
  fieldId,
  viewId,
  tableId,
} = useSelection()
</script>

<template>
  <!-- Yes, this is the simplified `Develop tool` plugin without copy function -->
  <p>tableId: {{ tableId ?? "null" }}</p>
  <p>viewId: {{ viewId ?? "null" }}</p>
  <p>fieldId: {{ fieldId ?? "null" }}</p>
  <p>recordId: {{ recordId ?? "null" }}</p>
  <p>baseId: {{ baseId ?? "null" }}</p>
</template>

Usage

useSelection is a reactive current selection, which is updated in real time according to the change of the user's selected object.

import { useSelection } from "@qww0302/use-bitable"

const {
  baseId,
  recordId,
  fieldId,
  viewId,
  tableId,
} = useSelection()

Type Declarations

import { Selection } from "@lark-base-open/js-sdk"
interface useSelectionOptions {
  onChanged?: (selection: Selection) => void
}
/**
 * Reactive bitable selection
 *
 * 响应式的bitable当前选中项
 *
 * @param options
 */
export declare function useSelection(options?: useSelectionOptions): {
  baseId: import("vue").Ref<string | null, string | null>
  recordId: import("vue").Ref<string | null, string | null>
  fieldId: import("vue").Ref<string | null, string | null>
  viewId: import("vue").Ref<string | null, string | null>
  tableId: import("vue").Ref<string | null, string | null>
}