vxe-table v3 表格中使用 a- 集成 ant-design-vue 组件库的

在公司开发大型项目中，使用主流表格库 vxe-table v3 和  ant-design-vue 组件库，可以在可编辑单元格中渲染非常简单的使用更多的组件
官网：https://vxetable.cn
安装

1. npm install vxe-pc-ui@3.3.9 vxe-table@3.11.10 @vxe-ui/plugin-render-antd@3.0.1

复制代码

1. // ...
2. import VxeUI from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. import VxeUITable from 'vxe-table'
5. import 'vxe-table/lib/style.css'
6. import VxeUIPluginRenderAntd from '@vxe-ui/plugin-render-antd'
7. import '@vxe-ui/plugin-render-antd/dist/style.css'
8. // ...
10. import Antd from 'ant-design-vue'
11. import 'ant-design-vue/dist/antd.css'
13. VxeUI.use(VxeUIPluginRenderAntd)
15. Vue.use(VxeUI)
16. Vue.use(VxeUITable)
17. Vue.use(Antd)

复制代码

使用输入框 a-input

1. <template>
2.   
3.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

使用下拉框 a-select

1. <template>
2.   
3.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

使用日期选择 a-date-picker

1. <template>
2.   
3.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

使用级联选择 a-cascader

1. <template>
2.   
3.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

还有非常的多，具体需要去看官网文档了
https://gitee.com/xuliangzhan/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！