kxkj-common1 v0.0.26-5

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组件：表格 KxVxTable

<template>
	<KxVxTable
		:tableData="tableData"
        :total="total"
        :tableConfig="tableConfig"
        :loading="loading"
        placeholder="员工姓名"
        @search="getPageList"
        @clear="getPageList"
        v-model:pageNum="pageRequest.pageNum"
        v-model:pageSize="pageRequest.pageSize"
        v-model:uname="queryParam.uname"
    >
	</KxVxTable>
</template>

属性

事件

插槽

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

<template>
	<KxSelTree
      :catalogTree="TreeData"
      :defaultCheckedKeys="defaultCheckedKeys"
      :defaultLevel="defaultOpenLevel"
      @transfer="getCurrNodeInfo"
      :defaultProps="defaultProps"
      cardStyle
      cardTitle="标题"
    >
    	<template #viewdata></template>
	</KxSelTree
</template>

属性

事件

5.页面中使用kxkjCommon组件：表单 KxForm【有副作用待优化】

<template>
	<KxForm tableName="表单名称" :state="表单状态" :sendInfo="sendInfo"  @handleSuccess="handleSuccess">
</template>

属性

事件

6.页面中使用kxkjCommon组件：权限按钮 KxButton【有副作用待优化】

<template>
	<KxButton label="删除" :perms="权限名称" type="primary" @click="点击事件" />
</template>

属性

插槽

7.页面中使用kxkjCommon组件：弹窗 KxDialog \ 抽屉 KxDrawer

<template>
    <KxDialog v-model:isShow="showMoreSelect" dialogName="弹窗名字" state="浏览" :isShowState="false" dialogWidth="50%">
      <template #content>
        弹窗内容
      </template>
    </KxDialog>

	<KxDrawer v-model:isShow="showMoreSelect" dialogName="抽屉名字" state="浏览" :isShowState="false" dialogWidth="50%">
      <template #content>
        抽屉内容
      </template>
    </KxDrawer>
</template>

属性

插槽

事件