Para impedir a edição de células em tabelas com vxe-table, existem dois métodos principais que podem ser implementados. O primeiro envolve a validação prévia antes da ativação da edição, enquanto o segundo utiliza propriedades de desativação direta nos componentes de entrada.

Configuração de bloqueio prévio

Utilize a função verificarPermissaoEdicao no editConfig para definir condições de acesso. Por exemplo, desativar a edição na terceira linha:

<template>
  <div>
    <vxe-grid :config="configuracaoTabela" @evento-edicao="tratarEvento">
      <template #editar_nome="{ linha }">
        <vxe-input v-model="linha.nome" :desabilitar="linha.nome.includes('x')"></vxe-input>
      </template>

      <template #editar_sexo="{ linha }">
        <vxe-input v-model="linha.sexo"></vxe-input>
      </template>

      <template #editar_idade="{ linha }">
        <vxe-input v-model="linha.idade" :desabilitar="linha.idade < 25"></vxe-input>
      </template>

      <template #editar_endereco="{ linha }">
        <vxe-input v-model="linha.endereco" :desabilitar="linha.sexo === 'Mulher'"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-table'

const configuracaoTabela = reactive({
  borda: true,
  sobreposicao: true,
  configEdicao: {
    disparo: 'clique',
    modo: 'linha',
    verificarPermissaoEdicao ({ indiceLinha }) {
      if (indiceLinha === 2) {
        return false
      }
      return true
    }
  },
  colunas: [
    { tipo: 'sequencia', largura: 50 },
    { campo: 'nome', titulo: 'Nome', renderEdicao: {}, slots: { editar: 'editar_nome' } },
    { campo: 'sexo', titulo: 'Sexo', renderEdicao: {}, slots: { editar: 'editar_sexo' } },
    { campo: 'idade', titulo: 'Idade', renderEdicao: {}, slots: { editar: 'editar_idade' } },
    { campo: 'endereco', titulo: 'Endereço', renderEdicao: {}, slots: { editar: 'editar_endereco' } }
  ],
  dados: [
    { id: 10001, nome: 'Teste1', apelido: 'T1', cargo: 'Desenvolvedor', sexo: 'Homem', idade: 28, endereco: 'Shenzhen' },
    { id: 10002, nome: 'Teste2', apelido: 'T2', cargo: 'Teste', sexo: 'Mulher', idade: 22, endereco: 'Guangzhou' },
    { id: 10003, nome: 'x1111', apelido: 'T3', cargo: 'Gerente', sexo: 'Homem', idade: 32, endereco: 'Shanghai' },
    { id: 10004, nome: 'Teste4', apelido: 'T4', cargo: 'Designer', sexo: 'Mulher', idade: 23, endereco: 'Shenzhen' },
    { id: 10005, nome: 'Teste5', apelido: 'T5', cargo: 'Desenvolvedor', sexo: 'Mulher', idade: 30, endereco: 'Shanghai' }
  ]
})

const tratarEvento = () => {
  VxeUI.modal.mensagem({
    conteudo: 'Edição proibida',
    status: 'erro'
  })
}
</script>

Desativação direta de componentes

Aplicar propriedades de desativação nos elementos de entrada para controlar permissões por coluna:

<template>
  <div>
    <vxe-grid :config="configuracaoTabela">
      <template #editar_nome="{ linha }">
        <vxe-input v-model="linha.nome" :desabilitar="linha.nome.startsWith('x')"></vxe-input>
      </template>

      <template #editar_sexo="{ linha }">
        <vxe-input v-model="linha.sexo"></vxe-input>
      </template>

      <template #editar_idade="{ linha }">
        <vxe-input v-model="linha.idade" :desabilitar="linha.idade < 27"></vxe-input>
      </template>

      <template #editar_endereco="{ linha }">
        <vxe-input v-model="linha.endereco" :desabilitar="linha.sexo === 'Mulher'"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const configuracaoTabela = reactive({
  borda: true,
  sobreposicao: true,
  configEdicao: {
    disparo: 'clique',
    modo: 'linha'
  },
  colunas: [
    { tipo: 'sequencia', largura: 50 },
    { campo: 'nome', titulo: 'Nome', renderEdicao: {}, slots: { editar: 'editar_nome' } },
    { campo: 'sexo', titulo: 'Sexo', renderEdicao: {}, slots: { editar: 'editar_sexo' } },
    { campo: 'idade', titulo: 'Idade', renderEdicao: {}, slots: { editar: 'editar_idade' } },
    { campo: 'endereco', titulo: 'Endereço', renderEdicao: {}, slots: { editar: 'editar_endereco' } }
  ],
  dados: [
    { id: 10001, nome: 'Teste1', apelido: 'T1', cargo: 'Desenvolvedor', sexo: 'Homem', idade: 28, endereco: 'Shenzhen' },
    { id: 10002, nome: 'Teste2', apelido: 'T2', cargo: 'Teste', sexo: 'Mulher', idade: 22, endereco: 'Guangzhou' },
    { id: 10003, nome: 'x1111', apelido: 'T3', cargo: 'Gerente', sexo: 'Homem', idade: 32, endereco: 'Shanghai' },
    { id: 10004, nome: 'Teste4', apelido: 'T4', cargo: 'Designer', sexo: 'Mulher', idade: 23, endereco: 'Shenzhen' },
    { id: 10005, nome: 'Teste5', apelido: 'T5', cargo: 'Desenvolvedor', sexo: 'Mulher', idade: 30, endereco: 'Shanghai' }
  ]
})
</script>

Documentação oficial