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
}