antdv-table-vbrowse v1.0.9

🔎 antdv-table-vbrowse

Vue3 Ant-design Table Component Virtual browsing Library

antdv 테이블 내의 데이터를 검색하여 빠른 탐색과 이동을 도와주는 라이브러리 입니다.
This library helps with fast navigation and movement by searching data within an Ant Design Vue table.
这是一个通过搜索 Ant Design Vue 表格中的数据来帮助快速导航和移动的库。

📚 Links

📌 NPM: https://www.npmjs.com/package/antdv-table-vbrowse
📌 Github: https://github.com/devlkhkr/antdv-table-vbrowse.git

📌 CodeSandbox(DEMO): https://codesandbox.io/p/devbox/antdv-table-vbrowse-ghnp8q

📚 Install

설치 | install | 安装

npm i antdv-table-vbrowse
yarn add antdv-table-vbrowse
pnpm i antdv-table-vbrowse

• 전역 지시문을 구성하고 등록합니다 (일반적으로 directives.ts)
  Configure and register global directives (Usually directives.ts)
  配置并注册全局指令（通常是 directives.ts）

import type { App } from 'vue';
import { setupVsearchDirective } from 'antdv-table-vbrowse';

export function setupGlobDirectives(app: App) {
  setupVsearchDirective(app);
}

📚 Usage

기본 사용 | default usage | 默认用法

<Table v-antdv-table-vbrowse /> // Table or a-table

옵션 사용 | Usage with options | 带选项的用法

<script lang="ts" setup>
	import { Table } from 'ant-design-vue';
	import { ref } from 'vue';
	const refPageSize = ref<number>(20);
	const pagination = ref({
		pageSize: refPageSize,
	});
</script>
// Table or a-table
<Table
	v-antdv-table-vbrowse="{
		active: true,
		defaultOpen: false,
		placeholder: 'Please Insert Keyword',
		noResultText: 'No Result Defined',
		searchAreaBgColor: '#333',
		searchAreaFontColor: '#fff',
		searchedCellBgColor: '#ffff0035',
		targetCellBgColor: '#ff000045',
		position: 'left bottom',
		movable: true,
		zIndex: 999,
		smoothScroll: true,
		loop: false,

		pagination: pagination,
		// In ant-design-vue Table case, pagination props is required
		// In vben-admin BasicTable case, pagination props is not required
	}"
>

• vben admin의 BasicTable 컴포넌트에서 사용시, BasicTable 내 Table 컴포넌트에 적용 가능. (이 경우 pagination은 필수가 아닙니다)
  Can be applied to the Table component within the BasicTable component of vben admin. In this case, pagination is not required.
  可应用于 vben admin 的 BasicTable 组件内的 Table 组件。在这种情况下，pagination 不是必须的。

📚 API

모든 속성은 optional 하며, 미입력시 default로 설정됩니다.
All properties are optional and will be set to default values if not provided.
所有属性都是可选的，如果未提供，则将设置为默认值。

🔔 Caution

• Table이 가지고 있는 Datasource에서만 탐색을 실행하기 때문에, 서버사이드에서 페이징 처리시 가져오지 않은 데이터에 대해서는 탐색하지 않습니다.
  Since the search is executed only within the datasource that the Table possesses, it does not search for data that has not been fetched during server-side pagination.
  由于搜索仅在 Table 拥有的数据源内执行，因此在服务器端分页时不会搜索尚未获取的数据。