外贸建站推广哪家好,网站首页分类怎么做的,阿里云 网站备案,上海装修公司排名知乎Vue3 TypeScript Element Plus 开启边框 调整列宽#xff08;拖动表头#xff09; 保存列宽#xff08;本地存储#xff09; 加载列宽#xff08;读取本地数据#xff09;
初始效果#xff1a; 1、开启边框#xff0c;点击【设置列宽】 2、调整列宽 TypeScript Element Plus 开启边框 调整列宽拖动表头 保存列宽本地存储 加载列宽读取本地数据
初始效果 1、开启边框点击【设置列宽】 2、调整列宽在表头的纵向边框处按住拖动 3、保存列宽列宽数据保存在本地 localStorage 4、打开页面加载列宽 从本地 localStorage 中读取列宽数据 技术栈
1、涉及表格属性border、 header-dragend
2、涉及表格列属性prop、width
3、本地存储 localStorage
4、相关逻辑存储表格列宽 localStorage.setItem、加载表格列宽 localStorage.getItem
相关代码Reagent.vue
script setup langts nameReagent
......// 边框标识
const isBorder ref(false);// 设置列宽
const onSetColumnWidthClick () {isBorder.value !isBorder.value;
};// 存储表格列宽
const saveColumnWidth (newWidth: number, oldWidth: number, column: TableColumnCtxIReagent, event: MouseEvent) {let prop column.property;localStorage.setItem(reagent_colWidth_${prop}, newWidth.toString());
};// 加载表格列宽
const loadColumnWidth (prop: string, defaultValue: number) {let colWidth localStorage.getItem(reagent_colWidth_${prop});return colWidth ? parseInt(colWidth, 10) : defaultValue;
};......
/scripttemplate......BasePreventReClickButton classheader-btn typeprimary plain :onClickonSetColumnWidthClick :delay0设置列宽/BasePreventReClickButton......el-tablereftable:datastore.reagentPageListv-loadingstore.loading:borderisBorderhighlight-current-rowstripe:show-summaryfalsestylewidth: 100%; height: 100%header-dragendsaveColumnWidthel-table-columntypeindexpropindexlabel序号:widthloadColumnWidth(index, 60)fixedleftheader-aligncenteraligncenter /el-table-columnpropreagentNamelabel名称 规格min-width200fixedleftheader-alignleftsortableshow-overflow-tooltiptemplate #defaultscopespan classmaterial-name{{ scope.row.reagentName }}/spanspan classmaterial-spec{{ scope.row.reagentSpec }}/span/template/el-table-columnel-table-columnpropbatchNolabel批号:widthloadColumnWidth(batchNo, 120)header-alignleftshow-overflow-tooltip /el-table-columnpropvalidityDatelabel有效期至:widthloadColumnWidth(validityDate, 110)header-aligncenteraligncentershow-overflow-tooltip /el-table-columnpropamount:widthloadColumnWidth(amount, 80)header-aligncenteraligncenterresizableshow-overflow-tooltiptemplate #headerdiv classcustom-table-column-header-amount-unit-div库存数量/div/templatetemplate #defaultscopediv classcustom-table-row-default-amount-unit-divspan{{ scope.row.amount }}/spanspan{{ scope.row.reagentUnit }}/span/div/template/el-table-columnel-table-column label操作 header-aligncenter aligncenter fixedright width150template #defaultscopeel-buttonclasstable-btntypeprimarysizedefaulttextclickonModifyClick(scope.$index, scope.row)查改/el-buttonel-button classtable-btn typewarning sizedefault text clickonLogoutClick(scope.row.id)注销/el-buttonel-button classtable-btn typeprimary sizedefault text clickonTransactionsClick(scope.row.id)明细/el-button/template/el-table-column/el-table......
/template
完整代码Reagent.vue
script setup langts nameReagent
import BasePreventReClickButton from /components/base/BasePreventReClickButton.vue;
import { Search } from element-plus/icons-vue;
import { ElMessage, ElMessageBox, type TableColumnCtx } from element-plus;
import { isEqual } from lodash-es;
import { nextTick, onMounted, ref } from vue;
import ReagentApplyDialog from ./reagent/comps/ReagentApplyDialog.vue;
import ReagentInDialog from ./reagent/comps/ReagentInDialog.vue;
import ReagentInfoDialog from ./reagent/comps/ReagentInfoDialog.vue;
import ReagentOutDialog from ./reagent/comps/ReagentOutDialog.vue;
import ReagentTransactionsDrawer from ./reagent/comps/ReagentTransactionsDrawer.vue;
import useReagentStore from ./reagent/stores;
import type { IReagent } from ./reagent/types;const store useReagentStore();
// 当前表格选择行
const currentSelectedRow refIReagent({id: 0,reagentCategory: ,reagentNo: ,reagentName: ,reagentSpec: ,reagentUnit:
});
// 是否新增
const isNew ref(true);
// 试剂耗材入库模态框实例对象
const reagentInDialogRef refInstanceTypetypeof ReagentInDialog | null(null);
// 试剂耗材申领模态框实例对象
const reagentApplyDialogRef refInstanceTypetypeof ReagentApplyDialog | null(null);
// 试剂耗材出库模态框实例对象
const reagentOutDialogRef refInstanceTypetypeof ReagentOutDialog | null(null);
// 试剂耗材信息模态框实例对象
const reagentInfoDialogRef refInstanceTypetypeof ReagentInfoDialog | null(null);
// 试剂耗材流转记录抽屉实例对象
const reagentTransactionsDrawerRef refInstanceTypetypeof ReagentTransactionsDrawer | null(null);
// 边框标识
const isBorder ref(false);// 入库
const onInClick () {isNew.value true;// 打开试剂耗材入库模态框reagentInDialogRef.value?.openDialog();
};// 申领
const onReceiveClick () {// 打开试剂耗材申领模态框reagentApplyDialogRef.value?.openDialog();
};// 出库
const onOutClick () {// 打开试剂耗材出库模态框reagentOutDialogRef.value?.openDialog();
};// 明细查询
const onDetailClick async () {await reagentTransactionsDrawerRef.value?.openDrawerByQuery();
};// 刷新数据
const onRefreshClick async () {await store.fetchReagentPageList();
};// 查询
const onQueryClick async () {// 分页页数及显示数量变动监听标识设置为 false后面更改 page不会触发分页监听store.onPageOrSizeChangeValid false;// 重置当前页码为 1store.queryObj.pageHelper.page 1;// 刷新数据await onRefreshClick();
};// 查改
const onModifyClick async (index: number, row: IReagent) {isNew.value false;currentSelectedRow.value row;await nextTick();reagentInfoDialogRef.value?.openDialog();
};// 注销
const onLogoutClick async (id: number) {try {await ElMessageBox.confirm(确定注销吗, 询问, {cancelButtonText: 取消,confirmButtonText: 确定,type: warning});await store.fetchLogoutReagent(id);ElMessage.success(注销成功);// 刷新数据await onRefreshClick();} catch (error) {}
};// 明细流转明细
const onTransactionsClick async (id: number) {await reagentTransactionsDrawerRef.value?.openDrawerByTransactions(id);
};// 更新试剂
const handleUpdateReagent async (reagent: IReagent) {// 两个对象不相同需要更新数据如果两个对象相同所有属性值都相同不需要更新数据if (!isEqual(currentSelectedRow.value, reagent)) {try {// 发送网络请求更新数据await store.fetchUpdateReagent(reagent);} catch (error) {return;}// 使用浅拷贝复制对象引用同步更新页面数据Object.assign(currentSelectedRow.value, reagent);}
};// 改变页码、显示数量重新获取数据
const onPageOrSizeChange async (currentPage: number, pageSize: number) {if (!store.onPageOrSizeChangeValid) {return;}store.queryObj.pageHelper.page currentPage;store.queryObj.pageHelper.size pageSize;// 刷新数据await onRefreshClick();
};// 设置列宽
const onSetColumnWidthClick () {isBorder.value !isBorder.value;
};// 存储表格列宽
const saveColumnWidth (newWidth: number, oldWidth: number, column: TableColumnCtxIReagent, event: MouseEvent) {let prop column.property;localStorage.setItem(reagent_colWidth_${prop}, newWidth.toString());
};// 加载表格列宽
const loadColumnWidth (prop: string, defaultValue: number) {let colWidth localStorage.getItem(reagent_colWidth_${prop});return colWidth ? parseInt(colWidth, 10) : defaultValue;
};onMounted(async () {// 刷新数据await onRefreshClick();
});
/scripttemplateel-container classcontainerel-header classheader!-- 标题 --div classheader-title试剂耗材管理/div!-- 操作栏 --div classheader-operationdivBasePreventReClickButton classheader-btn typeprimary plain :onClickonInClick入库/BasePreventReClickButtonBasePreventReClickButton classheader-btn typeprimary plain :onClickonReceiveClick :delay0申领/BasePreventReClickButtonBasePreventReClickButton classheader-btn typeprimary plain :onClickonOutClick :delay0出库/BasePreventReClickButtonBasePreventReClickButton classheader-btn typeprimary plain :onClickonDetailClick :delay0明细查询/BasePreventReClickButtonBasePreventReClickButton classheader-btn typeprimary plain :onClickonRefreshClick :delay0刷新数据/BasePreventReClickButtonBasePreventReClickButton classheader-btn typeprimary plain :onClickonSetColumnWidthClick :delay0设置列宽/BasePreventReClickButton/divdiv classquery-divel-input v-modelstore.queryObj.reagentName placeholder请输入试剂关键字进行查询 clearabletemplate #prefixel-iconSearch //el-icon/template/el-inputBasePreventReClickButton classquery-btn typeprimary plain :onClickonQueryClick :delay100查询/BasePreventReClickButton/div/div/el-headerel-main classmain!-- 展示区 --el-tablereftable:datastore.reagentPageListv-loadingstore.loading:borderisBorderhighlight-current-rowstripe:show-summaryfalsestylewidth: 100%; height: 100%header-dragendsaveColumnWidthel-table-columntypeindexpropindexlabel序号:widthloadColumnWidth(index, 60)fixedleftheader-aligncenteraligncenter /el-table-columnpropreagentNamelabel名称 规格min-width200fixedleftheader-alignleftsortableshow-overflow-tooltiptemplate #defaultscopespan classmaterial-name{{ scope.row.reagentName }}/spanspan classmaterial-spec{{ scope.row.reagentSpec }}/span/template/el-table-columnel-table-columnpropbatchNolabel批号:widthloadColumnWidth(batchNo, 120)header-alignleftshow-overflow-tooltip /el-table-columnpropvalidityDatelabel有效期至:widthloadColumnWidth(validityDate, 110)header-aligncenteraligncentershow-overflow-tooltip /el-table-columnpropamount:widthloadColumnWidth(amount, 80)header-aligncenteraligncenterresizableshow-overflow-tooltiptemplate #headerdiv classcustom-table-column-header-amount-unit-div库存数量/div/templatetemplate #defaultscopediv classcustom-table-row-default-amount-unit-divspan{{ scope.row.amount }}/spanspan{{ scope.row.reagentUnit }}/span/div/template/el-table-column!-- el-table-column proptotal label余额 width110 header-alignright alignright show-overflow-tooltiptemplate #defaultscope{{ formatMoney(scope.row.total, ¥, 2) }}/template/el-table-column --el-table-column label操作 header-aligncenter aligncenter fixedright width150template #defaultscopeel-buttonclasstable-btntypeprimarysizedefaulttextclickonModifyClick(scope.$index, scope.row)查改/el-buttonel-button classtable-btn typewarning sizedefault text clickonLogoutClick(scope.row.id)注销/el-buttonel-button classtable-btn typeprimary sizedefault text clickonTransactionsClick(scope.row.id)明细/el-button/template/el-table-column/el-table/el-mainel-footer classfooter!-- 分页 --el-pagination:totalstore.total:page-sizes[20, 50, 100, 200, 500]v-model:page-sizestore.queryObj.pageHelper.sizev-model:current-pagestore.queryObj.pageHelper.pagebackgroundlayouttotal, sizes, prev, pager, next, jumper:smallfalsechangeonPageOrSizeChange //el-footer/el-containerdiv!-- 试剂耗材入库模态框 --ReagentInDialog refreagentInDialogRef :is-newisNew /!-- 试剂耗材申领模态框 --ReagentApplyDialog refreagentApplyDialogRef /!-- 试剂耗材出库模态框 --ReagentOutDialog refreagentOutDialogRef :is-newisNew refreshonRefreshClick /!-- 试剂耗材修改模态框 --ReagentInfoDialogrefreagentInfoDialogRef:reagent-infocurrentSelectedRowupdate-reagenthandleUpdateReagent /!-- 试剂耗材流转记录抽屉 --ReagentTransactionsDrawer refreagentTransactionsDrawerRef //div
/templatestyle scoped langscss
// 选择 container 所有直接子元素不包括孙级
.container * {margin: 0;padding: 0;
}
.container {height: 100%;border: 1px solid #ebeef5;.header {height: auto;.header-title {margin: 10px 10px 20px 10px;font-size: 18px;}.header-operation {margin: 10px;display: flex;justify-content: space-between;.query-div {display: flex;justify-content: flex-end;// 设置固定宽度避免由于宽度自适应导致页面跳动width: 300px;// 因为点击查询按钮时会显示加载动画撑大了原来的按钮宽度导致页面跳动所以设置宽度为100px预留足够的空间避免页面跳动.query-btn {width: 100px;}}}}.footer {height: auto;padding: 0 10px;}
}
.table-btn {margin: 0;padding: 0 5px;
}
.custom-table-column-header-amount-unit-div {text-align: justify;text-align-last: justify;
}
.custom-table-row-default-amount-unit-div {display: flex;justify-content: space-between;
}
/style
