后端设置扩大办法
public static DataGridColumnBuilder<T> SetNumCheckBox<T>(this DataGridColumnBuilder<T> builder){ return builder.CellTemplate(new JS("CheckBoxCellTemplate")) .EditCellTemplate(new JS("CheckBoxEditorTemplate")) .Lookup(lookup => lookup.DataSource(new object[] { new { label = "是", value = 1, }, new { label = "否", value = 0, }, }).DisplayExpr("label").ValueExpr("value"));}
前端增加单元格和编辑代码
const getNewDomId = (function () { let id = 1; return function () { return id++; };})();function CheckBoxEditorTemplate(el, e) { var domId = 'grid_cell_' + getNewDomId(); el.html(`<div id="${domId}"></div>`); new Vue({ el: '#' + domId, template: `<el-checkbox v-model="state" v-on:change="onChange" />`, data: { state: e.value === 1, }, methods: { onChange(value) { e.setValue(value ? 1 : 0); }, }, });}function CheckBoxCellTemplate(container, options) { container.html( `<div class="dx-checkbox-container ${ options.value === 1 ? 'dx-checkbox-checked' : '' }"><span class="dx-checkbox-icon"></span></div>` );}