@vxe-ui/plugin-render-naive v4.0.9

@vxe-ui/plugin-render-naive

Vxe UI plug-in for compatibility with the naive-ui component.

Compatibility

It corresponds to vxe-table v4 or vxe-pc-ui v4

Installing

npm install @vxe-ui/plugin-render-naive

// ...
// Use vxe-pc-ui
import { VxeUI } from 'vxe-pc-ui'
// Use vxe-table
// import { VxeUI } from 'vxe-table'
import VxeUIPluginRenderNaive from '@vxe-ui/plugin-render-naive'
import '@vxe-ui/plugin-render-naive/dist/style.css'
// ...

VxeUI.use(VxeUIPluginRenderNaive)

API

Table Cell demo

<vxe-table
  height="600"
  :data="tableData"
  :edit-config="{trigger: 'click', mode: 'cell'}">
  <vxe-column field="name" title="Name" :edit-render="{}">
    <template #edit="{ row }">
      <n-input v-model:value="row.name"></n-input>
    </template>
    <template #default="{ row }">
      <span>{{ row.name }}</span>
    </template>
  </vxe-column>
  <vxe-column field="age" title="Age" :edit-render="{}">
    <template #edit="{ row }">
      <n-input v-model:value="row.age"></n-input>
    </template>
    <template #default="{ row }">
      <span>{{ row.age }}</span>
    </template>
  </vxe-column>
  <vxe-column field="date" title="Date" width="200" :edit-render="{}">
    <template #edit="{ row }">
      <n-date-picker type="date" v-model:value="row.date"></n-date-picker>
    </template>
    <template #default="{ row }">
      <span>{{ row.date }}</span>
    </template>
  </vxe-column>
</vxe-table>

Contributors

Thank you to everyone who contributed to this project.

License

MIT © 2019-present, Xu Liangzhan