vxe grid 可編輯表格 加校驗 數據格式過濾 初次體驗

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
}