vxe-grid配置式实现单元格禁止编辑功能（某一行的某个单元格）

需求描述：最近手头上有个需求是这样子，要求表格数据中如果当前行的数据来源类型不是手工创建时，数量不可编辑。（前提条件是该单元格得有编辑功能）

1.看了官方文档Vxe Table v3是通过edit-config.beforeEditMethod方法来判断,如下图

2.开始写代码

index.vue文件

<template>
  <div>
    <vxe-grid v-bind="gridOptions" @edit-disabled="editDisabledEvent"></vxe-grid>
  </div>
</template>
<script>
  data(){
   const gridOptions = {
      border: true,
      showOverflow: true,
      editConfig: {
        trigger: 'click',
        mode: 'cell',
        beforeEditMethod ({ row,column }) {
          // 锁定某行对应的单元格quantity
          if (column.field=='quantity'&&row.quantity&&row.sourceType!='手工创建') {
            return false  //不可编辑
          }
          return true //可编辑
        }
      },
      columns: [
        { type: 'seq', width: 50 },
        { field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },
        { field: 'quantity', title: 'quantity', editRender: { name: 'VxeInput' } },
        { field: 'sourceType', title: 'sourceType', editRender: { name: 'VxeInput' } }
      ],
      data: [
        { id: 10001, name: 'Test1', quantity: 5, sourceType: '导入' },
        { id: 10002, name: 'Test2', quantity: 4, sourceType: '导入' },
        { id: 10003, name: 'Test3', quantity: 3, sourceType: '手工创建' }
      ]
    }
    return {
      gridOptions
    }
  },
  methods:{
     editDisabledEvent ({ row, column }) {
      VxeUI.modal.message({
        content: '禁止编辑',
        status: 'error'
      })
    }
  }
</script>

3.踩坑提醒

  如果beforeEditMethod中条件

  1）只有row.quantity==4,则表示quantity等于4的行数据整行都不可编辑

  2）只有column.field == 'quantity'的话，则表示表格列为quantity的整列数据不可编辑

  3）只有column.field == 'quantity' && row.quantity&&row.sourceType!='手工创建'才能锁定到对应行的对应单元格