Ag-Grid动态渲染列

需求

我的需求:
Ag-Grid表格数据中，某字段DB存值为0或1。在表格行显示状态时，0不显示，1显示为√；
在表格行编辑状态时，期望效果如下：

• 值为0的时候，显示未选中的CheckBox
• 值为1的时候，显示选中的CheckBox
  即：表格展示时，为文本框单元格；表格编辑时，为可勾选的CheckBox复选框。

代码实现

export default {
	data() {
		return {
			columnDefs: null, //表格默认展示列
		}
	},
	beforeMount() {
		this.columnDefs = [{
			// 姓名
			headerName: '姓名',
			field: 'name',
			tooltipField: 'name',
			checkboxSelection: true,
			width: 90,
			minWidth: 90,
		},
		{
			// 成绩
			headerName: '成绩',
			field: 'grade',
			tooltipField: 'grade',
			width: 90,
			minWidth: 90,
		},
		{
			// 是否及格passOrFail：0 不及格;1 及格
			headerName: '及格',
			field: 'passOrFail',
			width: 85,
			minWidth: 85,
			cellRenderer: params => {
	
				// 如果选中当前行,该行进入编辑模式,将√或''以CheckBox选中或未选中的形式表示出来
				// params.rowIndex == this.selectedRowIndex ? '显示CheckBox选中或不选中' : '显示√或空'
	
				// passOrFail = 1,编辑模式下显示☑,表格展示数据状态下显示✔;
				// passOrFail = 0,编辑模式下显示☐,表格展示数据状态下显示''(空);
				// params.data.passOrFail === '1' ? '显示CheckBox 选中' : '显示CheckBox 不选中'
				// params.data.passOrFail === '1' ? '显示√' : '显示空'
	
				let columnKey = 'passOrFail';
				return  params.rowIndex == this.selectedRowIndex ?
							params.data.passOrFail === '1' ?
								`<input type="checkbox" id="faiBot_${params.rowIndex}" checked οnclick="checkboxClick('` + columnKey + `')" />` 
							:
								`<input type="checkbox" id="faiBot_${params.rowIndex}" οnclick="checkboxClick('` + columnKey + `')" />` 
						:
							params.data.passOrFail === '1' ? '√' : '' 
					;
			},
			// 绑定双击事件
			cellRenderer: params => {
				let columnKey = 'passOrFail';
				return `<span id="faiBot_${params.rowIndex}" style="display:inline-block;width:95%"
					οndblclick="checkboxClick('` + columnKey + `')">${params.data.passOrFail}</span>`;
			},
		}
	];
	},
	mounted: function() {

		// 在columnDefs加载时，并不能获取到[methods]中定义的"checkboxClick"方法
		// 因此需要 将复选框勾选状态改变事件挂载到 window 上
		window.checkboxClick = this.checkboxClick;
	},
	methods: {

		// 复选框勾选状态改变事件
		checkboxClick(columnKey) {

			let editRowIndex = this.selectedRowIndex;
			let editInputId = columnKey + '_' + editRowIndex;
			this[columnKey] = document.getElementById(editInputId).checked == true ? '1' : '0';

		},

		// Ag-Grid表格选中行事件,只可以通过行首的CheckBox选中
		onSelectionChanged() {

			// 刷新表格(无差别刷新,防止切换选中行时,上一条选中行仍处于编辑状态)
			this.onBtStopEditing();
			
			// 清空编辑状态用到的所有变量
			this.handleEditReset();

			// 获取全部选中行(该示例中只可以单行选中)
			var selectedRows = this.gridApi.getSelectedRows();
			this.multipleSelection = selectedRows;
			let selectedRowsLength = selectedRows.length;
			if (selectedRowsLength == 1) {

				// 将选中数据深拷贝进行备份,保存时调用比较修改后的值
				this.originalSelectedData = JSON.parse(JSON.stringify(selectedRows));

				// 将 passOrFail 的值,赋给全局变量,用作保存时判断修改的参照
				this.passOrFail = selectedRows[0].passOrFail;

				// 有选中记录,打开当前行的编辑状态
				this.onBtStartEditing();

			} else {

				// 没有选中记录,关闭表格的编辑模式
				this.onBtStopEditing();
			}
		},

		// 打开 行编辑模式
		onBtStartEditing: function() {

			// 获取全部选中行(需要拿到rowIndex,因此用"getSelectedNodes"方法)
			let rowNodesArray = this.gridApi.getSelectedNodes();
			// 只可以单行选中,取第一条记录,为当前选中记录
			let selectedRecord = rowNodesArray[0];
			// 获取 选中记录的 rowIndex
			let selectedRowIndex = selectedRecord.rowIndex;

			// 将表格的 第 selectedRowIndex+1 行,打开编辑模式(rowIndex从0开始)
			this.gridApi.startEditingCell({
				rowIndex: selectedRowIndex,
				colKey: 'name',//指定当前行首列的Key为'colKey'
			});

			// 赋值全局变量,用于动态控制 [passOrFail] 显示checkBox还是√
			this.selectedRowIndex = selectedRowIndex;

			// 只刷新当前选中行
			var params = {
				rowNodes: rowNodesArray,
				force: true
			};

			// 刷新表格(因为列定义的位置需要根据选中状态动态判定当前行的编辑或展示模式)
			// 刷新后,才会重新读取列定义的内容
			this.gridApi.refreshCells(params);
		},

		// 关闭 表格编辑状态
		onBtStopEditing() {

			this.gridApi.stopEditing();
			this.selectedRowIndex = null;
			var params = {
				force: true
			};
			this.gridApi.refreshCells(params);
		},

		// 清空编辑状态用到的全部变量
		handleEditReset() {

			// 选中的记录
			this.multipleSelection = [];
			// 选中记录修改的单元格的值
			this.changeRowRecord = null;
			// 选中行的行标
			this.selectedRowIndex = null;
			// passOrFail
			this.passOrFail = '';
		},
	}
}