vxe-table-nuxt

Vxe Table Nuxt

Vxe Table module for Nuxt

Features

• Automatically import components and styles on demand.

Installation

npm install vxe-table-nuxt -D

Configuration

export default defineNuxtConfig({
  modules: [
    'vxe-table-nuxt',
    'vxe-table-nuxt'
  ],
  vxeTableSetting: { /** Options */ }
})

Usage

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="role" title="Role"></vxe-column>
      <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

Reference Nuxt documentation and playground use.

Development

• Run npm run update i to install the dependencies.
• Run npm run run to start playground in development mode.
• Run npm run build to build this project.