useBitableUrl

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

提示

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

演示

Source

显示演示代码

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>

用法

useBitableUrl 是对 getBitableUrl 的封装，用于获取当前多维表格的 URL。它是响应式的，会随传入的 tableID，viewId，fieldId 和 recordId 等参数的变化而变化。

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

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

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

自定义 URL 参数

它也支持自定义 URL 参数，只需在options中配置params即可。

const url = useBitableUrl(tableId, {
  params: {
    vb: "1.2222.2",
    // 或者其他你需要的参数
  },
  /**
   * 当存在相同键时是否覆盖原有值，默认为 `false`
   * 例如：原本的 BitableUrl 带有 table 参数，但若在 `options.params` 中也配置了 table 参数，
   * 默认情况下不会覆盖，但若设置为 `true`，则会覆盖原有值。
   */
  override: true,
})

类型声明

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>