diff --git a/src/components/salescontract/index.vue b/src/components/salescontract/index.vue index fa9a02c..a17be01 100644 --- a/src/components/salescontract/index.vue +++ b/src/components/salescontract/index.vue @@ -2,8 +2,8 @@
- - + + 查询 @@ -16,19 +16,22 @@
- - - - - - - - - - - - - + + + + + + + + + + + + + + + +
@@ -58,6 +61,7 @@ const props = defineProps({ const queryParams = reactive({ contract_code: '', project_id: props.project_id, + contract_name: "", contract_type: props.contract_type, }); const { dictData } = useDictData('contract_type') diff --git a/src/hooks/usePaging.ts b/src/hooks/usePaging.ts index 9db873b..0d3a56c 100644 --- a/src/hooks/usePaging.ts +++ b/src/hooks/usePaging.ts @@ -13,6 +13,23 @@ interface Icolumn { column: { label: String; width: Number; property: string }; } +/** + * @description 计算table中每一项渲染到dom上所需要的宽度 + * @param string:需要渲染到dom上的内容 + * */ +function getWidthOfString(string: String) { + var span = document.createElement("span"); + // @ts-ignore + span.textContent = string; + span.style.visibility = "hidden"; + span.style.position = "absolute"; + span.style.whiteSpace = "nowrap"; + document.body.appendChild(span); + var width = span.offsetWidth; + document.body.removeChild(span); + return width; +} + export function usePaging(options: Options) { const { page = 1, @@ -32,15 +49,19 @@ export function usePaging(options: Options) { lists: [] as any[], extend: {} as Record, calcWidth: ({ column }: Icolumn) => { - // let propWidth = column.label.length * 14 + 24; - // let list = pager.lists.map( - // (item: Object) => (item as any)[column.property] - // ); - // const maxLength = list.reduce((max, str) => { - // return Math.max(max, String(str).length); - // }, 0); - // const columnWidth = maxLength * 14 + 24; - // column.width = Math.max(columnWidth, propWidth); + let propWidth = column.label.length * 14 + 26; + let list = pager.lists.map( + (item: Object) => (item as any)[column.property] + ); + + // start 遍历获取lits每一项所需要的宽度的最大值 + const maxLength = list.reduce((max, str) => { + return Math.max(max, getWidthOfString(str)); + }, 0); + // end + + const columnWidth = maxLength + 27; //27为el-table的cell 自带的padding 12px*2 + border 1px * 2 + 预留2px防止妖魔鬼怪作乱 + column.width = Math.max(columnWidth, propWidth); return column.label; }, }); diff --git a/src/views/bid_bidding_decision/edit.vue b/src/views/bid_bidding_decision/edit.vue index 126132f..bcad080 100644 --- a/src/views/bid_bidding_decision/edit.vue +++ b/src/views/bid_bidding_decision/edit.vue @@ -1,7 +1,7 @@