vxe-talbe单元格触发实时校验
两种设置方法
如这篇博客的单元第三点所说 传送门
- 手动调用输入组件的change事件
- 在cloumn上使用renderEdit配置(
第一种还好理解，手动调用输入框的格触change事件，当数据发生改变时，发实更新table数据的时校状态来触发校验；
第二种直接配置参数也可以的话，那个肯定是单元框架自己根据配置来做了这一步的处理，接下来探究了一下vxe-table的格触源码
说明：下面提及的源码的方法都在项目目录下的node_modules\vxe-table\lib\index.umd.js(umd 是统一模块定义方法，可以兼容所有其他的发实模块定义方法。我也是时校刚刚百度的)有这样一个渲染内置组件的的Map
其中有个renderEdit、renderDefault属性，单元对应了EditRender（nativeEditRender、格触defaultEditRender）方法
渲染原生的发实标签
渲染标签的函数最后return 一个h函数，h函数中的时校对象参数有on、nativeOn这两个属性，单元其分别对应绑定原生事件与绑定框架封装的格触事件。（这里稍微看了下源码，发实大概猜测是如此）
getNativeEditOns与getEditOns结构是类似的,如下：
function getEditOns(renderOpts, params) { var $table = params.$table, row = params.row, column = params.column; var name = renderOpts.name; var model = column.model; var isImmediate = isImmediateCell(renderOpts, params); return getOns(renderOpts, params, function (cellValue) { // 处理 model 值双向绑定 if (isImmediate) { UtilTools.setCellValue(row, column, cellValue); } else { model.update = true; model.value = cellValue; } }, function (eventParams) { // 处理 change 事件相关逻辑 if (!isImmediate && (name === '$input' || name === '$textarea')) { $table.updateStatus(params, eventParams.value); } else { $table.updateStatus(params); } });}function getNativeEditOns(renderOpts, params) { var $table = params.$table, row = params.row, column = params.column; var model = column.model; return getOns(renderOpts, params, function (evnt) { // 处理 model 值双向绑定 var cellValue = evnt.target.value; if (isImmediateCell(renderOpts, params)) { UtilTools.setCellValue(row, column, cellValue); } else { model.update = true; model.value = cellValue; } }, function (evnt) { // 处理 change 事件相关逻辑 var cellValue = evnt.target.value; $table.updateStatus(params, cellValue); });}到了这里可以发现，它们都有处理change事件的相关逻辑，所以对于上面所述第二种触发实时使用配置参数的方法，框架会自动去调updateStatus()这个函数来更新数据的状态。
最后来看看这个updateStatus函数吧
/** * 更新项状态 * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一项编辑状态 注：源码中还有一个同名函数处理更新某一列的编辑状态 * 如果单元格配置了校验规则，则会进行校验 */ updateStatus: function updateStatus(scope, itemValue) { var _this9 = this; var property = scope.property; if (property) { this.validItemRules('change', property, itemValue).then(function () { _this9.clearValidate(property); }).catch(function (_ref3) { var rule = _ref3.rule; var itemList = _this9.getItems(); var item = itemList.find(function (item) { return item.field === property; }); if (item) { item.showError = true; item.errRule = rule; } }); } }其注释已经说得很清楚了，这里就是调用了校验规则来校验改变的数据，从而会在数据不匹配时，显示错误信息、从而实现了实时校验
从上面第一步的截图中可以发现，有input和$input ，那么配置参数时 input 与 $input 有什么区别呢
首先$input 多了个renderCell的属性，也就多了一个处理：
从其逻辑来看，其应该会对于日期、浮点数有个处理，具体怎么用，我现在也不清楚页面渲染上如下图：$input 多了一个div来处理
今天就到此为止吧
