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 => {
   
	
				// 如果选中当前行,该行进入编辑模式,将√或''以Chec