es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El índice anidado de dataIndex en la tabla de Ant Design.

15 Jul, 2023 Programación

Este es mi código a continuación:

const columns = [
    {
        key: '1',
        title: 'id',
        dataIndex: 'id'
    },
    {
        key: '2',
        title: 'estado',
        dataIndex: ['status', 'id'],
        render: (text) => <a> {texto} / {id} </a>
    },
];

Quiero mostrar los datos (texto/id) como en el siguiente código:

const columns = [
    {
        key: '1',
        title: 'id',
        dataIndex: 'id'
    },
    {
        key: '2',
        title: 'estado',
        dataIndex: ['status', 'id'],
        render: (text) => <a> {texto} / {id} </a>
    },
];

He intentado con estos ejemplos:

  1. dataIndex: ['status', 'id']
  2. dataIndex: 'status.id'

Pero eso no funciona (versión 4.14.0). ¿Cómo puedo mostrarlo de esa manera? Por favor, responda aquí. Gracias.

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar tanto status como id en la función render, es necesario que ambos estén disponibles en la variable text.

    Una solución es pasar el objeto de datos completo a la función render y luego extraer tanto status como id de él.

    Aquí tienes un fragmento de código actualizado que debería funcionar:

    const columns =  [
  {
    key: '1',
    title: 'id',
    dataIndex: 'id'
  },
  {
    key: '2',
    title: 'status',
    dataIndex: 'status',
    render: (text, record) => <a>{text} / {record.id}</a>
  },
];

    En este código, pasamos tanto text (que es el valor de status para la fila actual) como record (que es el objeto de datos completo para la fila actual) a la función render. Luego usamos record.id para extraer el valor de id y mostrar tanto status como id en la etiqueta a.

Comments are closed.