# 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}默認提示', }, ], }, ] ```