使用示例 · JeecgBoot 開發文檔

# JVXETable 使用示例 [TOC=2,9] ## 示例一 >[info] 本示例演示了`JVXETable`的基本用法 ``` html <j-vxe-table ref="xTable" toolbar bordered row-number row-selection height="auto" :maxHeight="300" :columns="columns" :dataSource="dataSource" @valueChange="handleValueChange" /> ``` ## 示例二 >[info] 本示例演示了`columns`的基本用法 ``` js import { JVXETypes } from '@/components/jeecg/JVxeTable' /*--- 忽略部分代碼片斷 ---*/ columns: [ { title: '名稱', key: 'name', type: JVXETypes.input, placeholder: '請輸入${title}', defaultValue: '稱名', // 表單驗證規則 validateRules: [ { required: true, // 必填 message: '${title}不能為空' // 提示的文本 }, { pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正則 message: '${title}必須以字母開頭，可包含數字、下劃線、橫杠' } ] }, { title: '年齡', key: 'age', type: JVXETypes.inputNumber, placeholder: '請輸入${title}', defaultValue: 18, validateRules: [{required: true, message: '${title}不能為空'}] } ] /*--- 忽略部分代碼片斷 ---*/ ``` ## 示例三 >[info]本示例演示了如何進行`表單驗證`和`獲取數據` ``` // 進行表單驗證 this.$refs.xTable.validateTable().then(errMap => { if (!errMap) { this.$message.success('驗證通過') // 獲取數據 let tableData = this.$refs.xTable.getTableData() let deleteData = this.$refs.xTable.getDeleteData() // 將通過后的數組提交到后臺或自行進行其他處理 console.log({tableData , deleteData }) } else { // 驗證未通過，errMap里包含具體未驗證通過的詳情 this.$message.error('驗證未通過') } }) ``` ## 示例四 >[info]本示例演示了如何使用`插槽(slot)`和插槽的參數介紹 ``` html <template> <j-vxe-table :columns="columns" :dataSource="dataSource">    <template v-slot:action="props"> <a @click="handleView(props)">查看</a> <a-divider type="vertical"/> <a-popconfirm title="確定刪除嗎？" @confirm="handleDelete(props)"> <a>刪除</a> </a-popconfirm> </template> </j-vxe-table> </template> <script> import { JVXETypes } from '@/components/jeecg/JVxeTable' export default { data() { return { columns: [ // ... { title: '操作', key: 'action', width: '100px', // 固定在右側 fixed: 'right', // 對齊方式為居中 align: 'center', // 組件類型定義為【插槽】 type: JVXETypes.slot, // slot 的名稱，對應 v-slot 冒號后面和等號前面的內容 slotName: 'action' } ] } }, methods: { handleView(props) { // 參數介紹： // props.value 當前單元格的值 // props.row 當前行的數據 // props.rowId 當前行ID // props.rowIndex 當前行下標 // props.column 當前列的配置 // props.columnIndex 當前列下標 // props.$table vxe實例，可以調用vxe內置方法 // props.target JVXE實例，可以調用JVXE內置方法 // props.caseId JVXE實例唯一ID // props.scrolling 是否正在滾動 // props.triggerChange 觸發change事件，用于更改slot的值 console.log("props: ", props) }, handleDelete(props) { // 使用實例：刪除當前操作的行 props.target.removeRows(props.row) } } } </script> ``` ## 示例五 >[info]本示例演示了如何進行`自定義函數校驗` ``` js columns: [ { title: '字段名稱', key: 'dbFieldName', type: JVXETypes.input, validateRules: [ { // 自定義函數校驗 handler handler({ cellValue, row, column }, callback, target) { // cellValue 當前校驗的值 // row 當前行數據 // column 當前列配置 // callback(flag, message) 方法【必須執行】且只能執行一次。 // flag = 是否通過了校驗，不填寫或者填寫 null 代表不進行任何操作 // message = 提示的類型，默認使用配置的 message // target 行編輯的實例對象 // 示例： if (cellValue === 'abc') { callback(false, '${title}不能是abc') // false = 未通過，可以跟自定義提示 } else { callback(true) // true = 通過驗證 } }, message: '${title}默認提示' } ] }, ] ```