\u540e\u7aef\u8bbe\u7f6e\u6269\u5c55\u65b9\u6cd5<\/p>\n
public static DataGridColumnBuilder<T> SetNumCheckBox<T>(this DataGridColumnBuilder<T> builder)\n{\n return builder.CellTemplate(new JS("CheckBoxCellTemplate"))\n .EditCellTemplate(new JS("CheckBoxEditorTemplate"))\n .Lookup(lookup => lookup.DataSource(new object[] {\n new {\n label = "\u662f",\n value = 1,\n },\n new {\n label = "\u5426",\n value = 0,\n },\n }).DisplayExpr("label").ValueExpr("value"));\n}<\/code><\/pre>\n\u524d\u7aef\u6dfb\u52a0\u5355\u5143\u683c\u548c\u7f16\u8f91\u4ee3\u7801<\/p>\n
const getNewDomId = (function () {\n let id = 1;\n return function () {\n return id++;\n };\n})();\n\nfunction CheckBoxEditorTemplate(el, e) {\n var domId = 'grid_cell_' + getNewDomId();\n el.html(`<div id="${domId}"><\/div>`);\n\n new Vue({\n el: '#' + domId,\n template: `<el-checkbox v-model="state" v-on:change="onChange" \/>`,\n data: {\n state: e.value === 1,\n },\n methods: {\n onChange(value) {\n e.setValue(value ? 1 : 0);\n },\n },\n });\n}\n\nfunction CheckBoxCellTemplate(container, options) {\n container.html(\n `<div class="dx-checkbox-container ${\n options.value === 1 ? 'dx-checkbox-checked' : ''\n }"><span class="dx-checkbox-icon"><\/span><\/div>`\n );\n}<\/code><\/pre>\n