UNPKG

ve-curd

Version:

基于vue3.x和element-plus封装的curd组件,类似avue-curd,支持el-table和el-tree

80 lines (63 loc) 2.32 kB
# ve-curd #### 介绍 基于vue3.x和element-plus封装的curd组件,类似avue-curd,支持el-table和el-tree #### 软件架构 软件架构说明 #### 安装教程 1. npm i ve-curd #### 使用说明 在main.js安装相关依赖 1. 需要依赖element-plus ``` import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; import zhCn from "element-plus/es/locale/lang/zh-cn"; import "dayjs/locale/zh-cn"; app.use(ElementPlus, { locale: zhCn, size: "medium", }); ``` 2. `import VeCurd from "ve-curd";` 3. `app.use(VeCurd);` 4. 使用el-tree方式展示、参数参考el-tree ``` <ve-curd curd-type="tree" :data="treeData" :columns="tableColumns" :props="treeProps" @delete-sure="handleDelete" @edit-sure="handleEdit" @add-sure="handleAdd" ></ve-curd> ``` ![输入图片说明](imgs/treeimage.png) 5. 使用el-table方式展示 ``` <ve-curd :model="form" show-message :data="tableData" :columns="tableColumns" :total="page.total" v-model:page-size="page.pageSize" v-model:current-page="page.currentPage" v-model:ascs="page.ascs" v-model:descs="page.descs" v-model:filters="page.filters" @sort-change="handleChange" @size-change="handleChange" @current-change="handleChange" @filter-change="searchChange" @search-change="searchChange" @delete-sure="handleDelete" @edit-sure="handleEdit" @add-sure="handleAdd" > </ve-curd> ``` ![输入图片说明](imgs/tableimage.png) 4. 更多使用方式查看: [https://www.cnblogs.com/muphy/p/15826954.html](https://www.cnblogs.com/muphy/p/15826954.html) #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request