vxe grid 可編輯表格 加校驗 資料格式過濾 初次體驗
阿新 • • 發佈:2021-07-01
vxe table pc端表格解決方案 vxe官方文件
vxe-grid 通過edit-config來配置表格點選編輯 觸發的條件響應形式 再在相應的column 中配置edit-render設定每一行編輯的顯示樣式
<vxe-grid ref="xTable" resizable border stripe highlight-hover-row highlight-current-row keep-source column-key row-class-name="rowPointer" class="myTable" :data="tableData" row-id="price_item_id" :edit-rules="priceItemValidRules" :loading="tableLoading" :edit-config="{trigger:'dblclick', mode:'row', showStatus:true,activeMethod:activeMethod}" header-align="center"> <vxe-table-column field="unit_price" title="單價" width="120" align="center" :edit-render="{name: 'input', attrs: {type: 'number',digits:2,min:0}}" :formatter="formatterInfo" :digits="2"/> </vxe-grid>
column formatter設定單元格過濾函式(在不改變資料來源的情況下)
//定義的規則變數 priceItemValidRules:{ unit_price: [ {required: true, message: '單價不能為空' }, {pattern: /^0\.\d+$|^[0-9]+(\.\d+)?$/,message: "輸入數值不能為負數",} ], } //過濾格式的 函式 formatterInfo( {cellValue, row, column }){ cellValue=(cellValue-0).toFixed(2) return cellValue }, //點選編輯前的 邏輯判斷 activeMethod({ row, rowIndex, column, columnIndex }){ let isActive= this.$refs.xTable.getCheckboxRecords().filter(i=> i.price_item_id==row.price_item_id ) if(isActive.length<=0){ this.$message({ message: '請先啟用該專案', type: 'info' }); return false } return true }