Ant-Design-Vue utiliza en componente Tabla (primario)

1. ¿encabezados de columna de la tabla personalizada:

< Una mesa
         : columnas = "columnas" 
        : dataSource = "origen de datos" > 
        < lapso de ranura = "customTitle" > < un icono de tipo = "Smile-o" /> Nombre </ envergadura > 
</ a-tabla >

Columnas = const [　　
    {　
      dataIndex Los: 'nombre' , // lista personalizada de cabeza, no se puede establecer el atributo de título 
      align = left: 'izquierda' ,
       ranuras: {title: 'customTitle' }　　// ranuras se define aquí como una propiedad, y un conjunto atributo title 
    } 
]

La página se representa como sigue:

 

 

2. Cómo configurar un estilo de una sola línea personalizada

<A- Tabla 
        : Columnas = "columnas" 
        : el origen de datos = "El origen de datos"> 
        <tragamonedas lapso = "Acción" slot-scope = "Record, de índice"> // valor pasó aquí son: registro: la fila actual originales los datos, el índice: el índice de la fila actual 
          <a @click="handleEdit(record.key)"> edición </a> 
        </ span> 
</ a Mesa->

Columnas = const [ 
    { 
      título: 'Menú de títulos' 
      dataIndex: 'nombre' , // dataIndex valores correspondientes a los datos de columna en el correspondiente elemento de datos clave 
      Clave: 'nombre', 
      = Alinear a la izquierda: 'izquierda' , 
    }, 
    { 
      título: 'operación' , 
　　　 Key: 'Acción' 
      dataIndex la: 'Acción' , 
      anchura: '30% ' scopedSlots: {customRender: ' Acción '}, // esta línea de encargo renderer esta fila 
      align = left:' Centro ' 
    } 
 ]      

La página se muestra a continuación:

 3. ¿Cómo establecer el encabezado, pie de página y la línea de frontera?

< Plantilla > 
  < A-Tabla : Columnas = "Columnas" : el origen de datos = "datos" bordeado > atributo // bordeadas añaden aquí, las líneas de los bordes se pueden añadir 
    < Plantilla ranura = "nombre" ranura-scope = "text" > 
      < una la href = "JavaScript:;" > {{texto}} </ una > 
    </ Plantilla > 
    < Plantilla ranura = "título" ranura-scope = "currentPageData" > // ranura = "título" de cabecera se puede configurar , 'título'Otros valores no han cambiado la cabecera de la página 
      Cabecera - {{ currentPageData }} // aquí, imprimirlo CURRENTDATA, vistazo a lo que es el valor
    </ Plantilla >  
    < plantilla ranura = "pie" > pie de página </ plantilla > //跟上同理
 </ a-mesa >  
</ plantilla >

Columnas = const [no se definen // cabecera de columnas y pie de página del código relevante 
    { 
      título: 'el nombre' , 
      dataIndex El: 'nombre' , 
      scopedSlots: {customRender: 'nombre' }, 
    }, 
    { 
      título: 'Activo Caja ' 
      Nombre de clase: ' el dinero columnas ' 
      dataIndex el: ' dinero ' 
    }, 
    { 
      título: ' la dirección , 
      dataIndex el: 'dirección' , 
    }, 
  ];

Página mostrará los resultados de la siguiente manera:

 4. La tabla siguiente muestra cómo los datos de los árboles:

<A- Tabla 
    : Columnas = "columnas" 
    : el origen de datos = "el origen de datos" 
    childrenColumnName = "QQ" en el presente documento pueden ser seleccionados atributo nodo nombre // niño, generalmente para 'niños', donde i es puesto a 'qq', el efecto de la prueba 
    : rowSelection = "rowSelection"> // rowSelection una lista de elementos seleccionables cuando la disposición, que se describe más adelante 
    <span ranura = "customTitle"> <icono de tipo a = "Smile-O" /> el nombre </ span> 
    <span = hueco de "acción" slot-scope = "texto, Record, índice"> 
       <a @click="handleEdit(record.key)"> editar </a> 
    </ span> 
</ A Tabla->

columnas const = [ 
    { 
      dataIndex: 'nombre' , 
      clave: 'nombre' , 
      align: 'izquierda' , 
      ranuras: {title: 'customTitle' } 
    }, 
    { 
      título: '操作' , 
      dataIndex: 'acción' , 
      anchura: ' 30%' , 
      scopedSlots: {customRender: 'acción' }, 
      align: 'centro' 
    } 
  ] 
  const dataSource = [ 
    { 
      clave:1 , 
      Nombre:'John Brown SR.' , 
      Edad: 60 , 
      dirección: 'Nueva York Nº 1 Lake Park' , 
      qq: [// Aquí yo manejo nodos clave, en lugar de qq 
        { 
          clave: 11 , 
          nombre: John Brown ' 
          Edad: 42 es , 
          dirección: ' Nueva York Nº 2 Lake Park ' 
        } 
      ] 
    }, 
    { 
      clave: 2 , 
      nombre: ' Joe Negro ' 
      Edad: 32 , 
      dirección:'Sidney Nº 1 Lake Park' 
    } 
  ]

visualización de la página es el siguiente :( muestran correctamente)