kxkj-common

This template should help get you started developing with Vue 3 in Vite. 是基于vue3项目，对element-plus及vxe-table进行的二次封装.

使用方式

1. 安装kxkj-common：npm install --save kxkj-common@对应版本号-如不带则下载最新版本

1npm install --save kxkj-common

2. main.js 引用

1import { createApp } from "vue";
2import App from "./App.vue";
3import kxkjCommon from 'kxkj-common'
4import "kxkj-common/dist/style.css"
5
6let app = createApp(App);
7
8app.use(kxkjCommon);
9app.mount("#app");

3. 页面中使用kxkjCommon组件：表格

1// 配置参数
2// tableConfig--表格配置项(如表头，权限等)
3
4// showFooter--是否显示表尾
5
6// showTool -- 是否显示搜索栏
7
8// tableData -- 列表对应数据
9
10....
11

1<script setup>
2import { ref, reactive } from "vue";
3
4</script>
5
6<template>
7   <VxTable :tableConfig="tableConfig" :tableData="tableData"></VxTable>
8</template>
9
10<style scoped></style>
11

---

4. 页面中使用kxkjCommon组件：弹窗

1<script setup>
2import { ref, reactive } from "vue";
3
4</script>
5
6<template>
7   <KxPopup v-model:isShow="isShow" :isFooter="true">
8      <template #content>
9        <div>
10          插槽内容
11        </div>
12      </template>
13    </KxPopup>
14</template>
15
16<style scoped></style>
17

---

5. 页面中使用kxkjCommon组件：左侧树

1<script setup>
2import { ref, reactive } from "vue";
3
4</script>
5
6<template>
7   <treeView :catalogTree="compTreeData" :defaultLevel="defaultOpenLevel" @transfer="getCurrNodeInfo"
8    :defaultProps="defaultProps">
9    <template #viewdata>
10      <div>
11        列表或者内容展示
12      </div>
13    </template>
14  </treeView>
15</template>
16
17<style scoped></style>
18

---