useBitableUrl

• Category: Composables
• Relate: getBitableUrl
• 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 { useBitableUrl, useSelection } from "@qww0302/use-bitable"

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

const url = useBitableUrl(tableId, viewId, fieldId, recordId, {
  params: {
    vb: "1.2222.2",
  }
})

</script>

<template>
  <div>
    <p>Choose different table, view or cell: </p>
    <p>{{ url ?? "null" }}</p>
  </div>
</template>

Usage

useBitableUrl is a wrapper of getBitableUrl, used to get the URL of the current multidimensional table. It is responsive and will change with the change of parameters such as tableID, viewId, fieldId and recordId passed in.

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

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

const url = useBitableUrl(tableId, viewId, fieldId, recordId)

Custom URL parameters

It also supports custom URL parameters, just configure params in options.

const url = useBitableUrl(tableId, {
  params: {
    vb: "1.2222.2",
    // or other parameters you need
  },
  /**
   * Whether to override the original value when there are duplicate keys, the default is `false`
   * For example: The original BitableUrl has the table parameter, but if the table parameter is also configured in `options.params`,
   * By default, it will not override, but if set to `true`, it will override the original value.
   */
  override: true,
})

Type Declarations

import { MaybeRefOrGetter } from "vue"
import { GetBitableUrlOptions } from "@lark-base-open/js-sdk"
export interface useBitableUrlOptions {
  /**
   * The params will be append to the url
   *
   * 附加参数
   */
  params?: Record<string, string> | (() => Record<string, string>)
  /**
   * If true, the url will be override by the params when same param key exists
   *
   * 如果为true，url将会被params覆盖，当存在相同的key时
   *
   * @default false
   */
  override?: boolean
}
/**
 * Reactive Bitable Url
 *
 * 响应式 Bitable Url
 *
 * @param table
 * @param view
 * @param field
 * @param record
 */
export declare function useBitableUrl(
  table: MaybeRefOrGetter<GetBitableUrlOptions["tableId"]>,
  view: MaybeRefOrGetter<GetBitableUrlOptions["viewId"]>,
  field?: MaybeRefOrGetter<GetBitableUrlOptions["fieldId"]>,
  record?: MaybeRefOrGetter<GetBitableUrlOptions["recordId"]>,
  options?: useBitableUrlOptions,
): import("vue").Ref<string>