# JVxeTable 使用示例
[TOC]
## 示例一
> 本示例演示了`JVxeTable`的基本用法
``` html
<JVxeTable
ref="tableRef"
stripe
toolbar
rowNumber
rowSelection
rowExpand
resizable
:maxHeight="480"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
/>
```
## 示例二
> 本示例演示了`columns`的基本用法
``` ts
import { JVxeTypes, JVxeColumn} from '/@/components/jeecg/JVxeTable/types'
const columns = ref<JVxeColumn[]>([
{
title: '單行文本',
key: 'input',
type: JVxeTypes.input,
width: 180,
defaultValue: '',
placeholder: '請輸入${title}',
validateRules: [
{
required: true, // 必填
message: '請輸入${title}', // 顯示的文本
},
{
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正則
message: '必須以字母開頭,可包含數字、下劃線、橫杠',
},
{
unique: true,
message: '${title}不能重復',
},
{
handler({ cellValue, row, column }, callback, target) {
// cellValue 當前校驗的值
// callback(flag, message) 方法必須執行且只能執行一次
// flag = 是否通過了校驗,不填寫或者填寫 null 代表不進行任何操作
// message = 提示的類型,默認使用配置的 message
// target 行編輯的實例對象
if (cellValue === 'abc') {
callback(false, '${title}不能是abc') // false = 未通過校驗
} else {
callback(true) // true = 通過驗證
}
},
message: '${title}默認提示',
},
],
},
]
```
## 示例三
> 本示例演示了如何進行`表單驗證`和`獲取數據`
``` ts
/** 表單驗證 */
function handleTableCheck() {
tableRef.value!.validateTable().then(errMap => {
if (errMap) {
console.log('表單驗證未通過:', { errMap })
createMessage.error('驗證未通過,請在控制臺查看詳細')
} else {
createMessage.success('驗證通過')
}
})
}
/** 獲取值,忽略表單驗證 */
function onGetData() {
const values = tableRef.value!.getTableData()
console.log('獲取值:', { values })
createMessage.success('獲取值成功,請看控制臺輸出')
}
```
## 示例四
> 本示例演示了如何使用`插槽(slot)`和插槽的參數介紹
``` html
<template>
<JVxeTable ref="tableRef" toolbar :columns="columns" :dataSource="dataSource">
<!-- 定義插槽 -->
<template #action="props">
<a @click="handleView(props)">查看</a>
<a-divider type="vertical"/>
<a-popconfirm title="確定刪除嗎?" @confirm="handleDelete(props)">
<a>刪除</a>
</a-popconfirm>
</template>
</JVxeTable>
</template>
<script lang="ts">
import {ref, defineComponent} from 'vue'
import {JVxeTypes, JVxeColumn, JVxeTableInstance} from '/@/components/jeecg/JVxeTable/types'
export default defineComponent({
setup() {
const tableRef = ref<JVxeTableInstance>()
const columns = ref<JVxeColumn[]>([
// ...
{
title: '操作',
key: 'action',
width: '100px',
// 固定在右側
fixed: 'right',
// 對齊方式為居中
align: 'center',
// 組件類型定義為【插槽】
type: JVxeTypes.slot,
// slot 的名稱,對應 v-slot 冒號后面和等號前面的內容
slotName: 'action',
},
])
const dataSource = ref([])
function handleView(props) {
// 參數介紹:
// props.value 當前單元格的值
// props.row 當前行的數據
// props.rowId 當前行ID
// props.rowIndex 當前行下標
// props.column 當前列的配置
// props.columnIndex 當前列下標
// props.$table vxe-table實例,可以調用vxe-table內置方法
// props.scrolling 是否正在滾動
// props.reloadEffect 是否開啟了數據刷新特效
// props.triggerChange 觸發change事件,用于更改slot的值
console.log('props: ', props)
}
function handleDelete({row}) {
// 使用實例:刪除當前操作的行
tableRef.value?.removeRows(row)
}
return {tableRef, columns, dataSource, handleView, handleDelete}
},
})
</script>
```
## 示例五
> 本示例演示了如何進行`自定義函數校驗`
``` js
columns: [
{
title: '單行文本',
key: 'input',
type: JVxeTypes.input,
width: 180,
defaultValue: '',
placeholder: '請輸入${title}',
validateRules: [
{
handler({ cellValue, row, column }, callback, target) {
// cellValue 當前校驗的值
// callback(flag, message) 方法必須執行且只能執行一次
// flag = 是否通過了校驗,不填寫或者填寫 null 代表不進行任何操作
// message = 提示的類型,默認使用配置的 message
// target 行編輯的實例對象
if (cellValue === 'abc') {
callback(false, '${title}不能是abc') // false = 未通過校驗
} else {
callback(true) // true = 通過驗證
}
},
message: '${title}默認提示',
},
],
},
]
```
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘