1 Star 1 Fork 0

晴天 / QTComponents

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

QT组件库

介绍

Vue3+Ts 二次封装 el-table 实现 table 定制化,删除行,增加行

Echart 组件,包括柱状图、环形图、仪表盘组件

2024/04/12 更新

增加一个方法,在 token 失效时,不跳转页面,在当前页面重新登录,以此解决页面填写内容以后,因为 token 失效导致的数据丢失,从而重新填写的问题(reLoginModal)

10.8 更新

优化自定义列宽与滚动 优化范围输入

9.4 更新

增加 date(单元格里日期选择),rang(范围输入),img(图片展示),select(下拉选择) 样式

增加项目中使用到的 Echart 组件,包括柱状图、环形图、仪表盘组件

reLoginModal 使用演示

import { openModal } from "url/reLoginModal/components/function/openFunctionModal";
import CLoginModal from "url/reLoginModal/components/CLoginModal.vue";
/**
		 * @description 响应拦截器
		 *  服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
		 */
		this.service.interceptors.response.use(
			(response: AxiosResponse) => {
				const { data } = response;
				// * 在请求结束后,并关闭请求 loading
				tryHideFullScreenLoading();
				// * 登陆失效(code == 401)
				console.log("响应码:", data.code);
				if (data.code === ResultEnum.TOKEN_INVALID || data.code === ResultEnum.TOKEN_OVERDUE) {
					if (!isShowingTokenDialog) {
						isShowingTokenDialog = true;
						const globalStore = GlobalStore();
						ElMessageBox.confirm("token失效,请重新登录", "重新登录", {
							confirmButtonText: "在当前页重新登录",
							cancelButtonText: "取消",
							type: "warning",
							closeOnPressEscape: false,
							closeOnClickModal: false,
							showClose: false
						})
							.then(() => {
								console.log("执行了then");
								openModal(CLoginModal, {
									userAccount:
										globalStore.userCacheData &&
										globalStore.userCacheData.userAccount &&
										globalStore.userCacheData.userAccount.length
											? globalStore.userCacheData.userAccount
											: ""
								}); // globalStore.userCacheData.userAccount
								isShowingTokenDialog = false;
								// console.log(route.path);
								// if (route.path !== "/login") {
								// 	openModal(CLoginModal, { message: "去登录" });
								// }
							})
							.catch(() => {
								isShowingTokenDialog = false;
								globalStore.setToken("");
								router.replace(LOGIN_URL);
								// return Promise.reject(data);
							});
					}
					return false;
				}
				// * 成功请求(在页面上除非特殊情况,否则不用在页面处理失败逻辑)
				return data;
			},
		);

myTable 使用演示

<MyTable :config="tableConfigEdu" :data="tableDataEdu" :border="true" />
<script setup lang="ts">
  interface TableDataTrain {
    startDate: string;
    endDate: string;
    address: string;
    content: string;
  }
  const tableConfigTrain = ref<TableConfigTest<TableDataTrain>>({
    columns: [
      {
        type: "txt",
        prop: "startDate",
        label: "开始日期",
        width: 200,
      },
      {
        type: "txt",
        prop: "endDate",
        label: "截止日期",
        width: 200,
      },
      {
        type: "txt",
        prop: "address",
        label: "地点",
      },
      {
        type: "txt",
        prop: "content",
        label: "内容",
      },
    ],
  });
  const tableDataTrain = ref<TableDataTrain[]>([
    { startDate: "", endDate: "", address: "", content: "" },
  ]);
</script>

封装组件是为了更好的工作,随着工作的需求增加,会不断增加组件的功能,同时也会更新文档。

空文件

简介

我的个人组件库,目前有echarts按需引入的几个图表的组件,el-table的二次封装组件,基于vue3的h函数的一个弹框组件。 展开 收起
Vue 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/QingTian18/Vue3-Ts-eltable.git
git@gitee.com:QingTian18/Vue3-Ts-eltable.git
QingTian18
Vue3-Ts-eltable
QTComponents
master

搜索帮助