kxkj-common

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@对应版本号-如不带则下载最新版本

npm install --save kxkj-common

2. main.js 引用

import { createApp } from "vue";
import App from "./App.vue";
import kxkjCommon from 'kxkj-common'
import "kxkj-common/dist/style.css"

let app = createApp(App);

app.use(kxkjCommon);
app.mount("#app");

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

// 配置参数
// tableConfig--表格配置项(如表头，权限等)

// showFooter--是否显示表尾

// showTool -- 是否显示搜索栏

// tableData -- 列表对应数据

....

<script setup>
import { ref, reactive } from "vue";

</script>

<template>
   <VxTable :tableConfig="tableConfig" :tableData="tableData"></VxTable>
</template>

<style scoped></style>

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

<script setup>
import { ref, reactive } from "vue";

</script>

<template>
   <KxPopup v-model:isShow="isShow" :isFooter="true">
      <template #content>
        <div>
          插槽内容
        </div>
      </template>
    </KxPopup>
</template>

<style scoped></style>

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

<script setup>
import { ref, reactive } from "vue";

</script>

<template>
   <treeView :catalogTree="compTreeData" :defaultLevel="defaultOpenLevel" @transfer="getCurrNodeInfo"
    :defaultProps="defaultProps">
    <template #viewdata>
      <div>
        列表或者内容展示
      </div>
    </template>
  </treeView>
</template>

<style scoped></style>