vue3项目问题汇总

荔枝味大鹅

已于 2024-07-10 14:34:33 修改

阅读量311

点赞数 6

文章标签： vue.js 前端 javascript

于 2024-04-18 16:54:58 首次发布

本文链接：https://blog.csdn.net/weixin_47424249/article/details/137685621

版权

1、使用vxe-table导出文件，列表数据开头为0的数据导出后自动格式化，例如：‘00110’=>‘110’

解决办法：在需要导出的列上添加 cell-type="string" 设置类型为字符串

<vxe-column
   v-for="(item, index) in certificateDataSource"
   :key="index"
   :field="item.field"
   :title="item.title"
   cell-type="string">
</vxe-column>

2、使用自定义指令自适应表格高度

app.directive('adaptive', {
   mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {
      el.resizeListener = () => {
         nextTick(() => {
            setHeight(el, binding);
         });
      };
      nextTick(() => {
         setHeight(el, binding);
      });
      window.addEventListener('resize', el.resizeListener);
   },
   unmounted(el: ExHTMLElement) {
      window.removeEventListener('resize', el.resizeListener);
   },
   updated(el: ExHTMLElement, binding: DirectiveBinding) {
      nextTick(() => {
         setHeight(el, binding);
      });
   },
});
/**
 * 计算表格高度
 * binding中包含两个自定义参数
 *  1、height：代表直接设置该表格高度为height+'px'
 *  2、otherHeight：代表其他高度
 *  3、tableSum 为当页表格数量，若数量大于1则固定表格高度为400px
 *  参数为项目特殊业务，若不需要则直接使用
 *      !binding.value.height &&!binding.value.otherHeight中的判断即可
 */
function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
   let flag = false;
   // 判读是否有分页
   for (const childrenKey in el.parentNode!.children) {
      if (el.parentNode!.children[childrenKey].classList?.contains('el-pagination')) {
         flag = true;
      }
   }
   const viewHeight = window.innerHeight;
   setTimeout(() => {
      const top = el.getBoundingClientRect().top; // 96
      const bottom = flag ? 32 : 0; // 32px为分页的高度
      if (
         (binding.value.tableSum && binding.value.tableSum > 1) ||
         (binding.value.editTableSum && binding.value.editTableSum > 1)
      ) {
         el.style.height = '400px';
      } else {
         if (binding.value.height) {
            el.style.height = binding.value.height - 8 + 'px';
         }
         if (binding.value.otherHeight) {
            el.style.height = viewHeight - top - bottom - 16 - 8 + 'px';
         }
         if (!binding.value.height && !binding.value.otherHeight) {
            el.style.height = viewHeight - top - bottom - 16 - 8 + 'px'; // 8-margin
            const heigthNum = el.style.height.slice(0, el.style.height.length - 2);
            if (Number(heigthNum) < 200) {
               el.style.height = '300px';
            }
         }
      }
   }, 0);
}

3、使用下拉表格组件

因为项目是基于Element-plus组件库的，所以引入外部组件：

下拉选择表格组件 | TuiPlus基础组件文档

<template>
	<t-select-table
		ref="selectTable"
		:table="table"
		:columns="table.columns"
		:max-height="400"
		align="center"
		:keywords="keywords"
		@focus="getSelectOptions($event, config.field_code)"
		@radio-change="radioChange"
		@clear="clear"
	></t-select-table>
</template>

效果：

4、获取表格列宽

const columns = basicTableRef.value[0].tableRef.getColumns(); // 获取所有列
    const widthArr = [];
    columns.forEach(column => {
        const width = basicTableRef.value[0].tableRef.getColumnWidth(column); // 获取单个列宽度
        if(column.property!==undefined){
            widthArr.push({
                field_code:column.property,
                column_width:width
            })
        }
    });

widthArr：

拖拽列宽之后也可以实时更新

5、vue3文件流下载

/**
 * 拿到文件流后的下载的方法
 * @param {*} data
 * @param {*} filename
 * @param {*} mime
 * @param {*} bom
 */
export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
	const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
	const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
	if (typeof window.navigator.msSaveBlob !== 'undefined') {
		window.navigator.msSaveBlob(blob, filename);
	} else {
		const blobURL = window.URL.createObjectURL(blob);
		const tempLink = document.createElement('a');
		tempLink.style.display = 'none';
		tempLink.href = blobURL;
		tempLink.setAttribute('download', filename);
		if (typeof tempLink.download === 'undefined') {
			tempLink.setAttribute('target', '_blank');
		}
		document.body.appendChild(tempLink);
		tempLink.click();
		document.body.removeChild(tempLink);
		window.URL.revokeObjectURL(blobURL);
	}
}

// 下载失败文件
export const failedDataLoad = async ({ smallDialogConfig }: any) => {
	const data1 = smallDialogConfig.acctUploadFailData;
	const params = {
		failedCode: data1.failedCode,
		failedDataList: data1.failedDataList,
	};
	const finalParams = {
		requestStr: JSON.stringify(params),
	};
	await POST(
		encodeURI(`gfmis/bgtex/payvoucher/request/exportFailedData`),
		Qs.stringify(finalParams),
		null,
		{ responseType: 'blob' }
	).then((data: any) => {
		downloadByData(data, '失败数据.xlsx');
	});
};

运用qs.stringfy():

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。主要用于将url后面的值转换为对象，或者将对象拼接未url后面的值

转化为key，value的形式传给后端

备用下载文件流方法：

	//备用下载文件流1：
	const fileName = 'Excel-收款人账户.xlsx';
	//不建议改这个 post 还有get  流下载都通过这种形式
	const b = new Blob([blob], {type: 'application/vnd.ms-excel'});
	let link: any = document.createElement('a');
	const href = URL.createObjectURL(b);
	link.href = href;
	link.download = fileName;
	link.click();
	link = null;
	window.URL.revokeObjectURL(href);

	//备用下载文件流2：
	const res: any = await downFileAccountByAgency();
	const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
	// 指定下载路径
	const url = window.URL.createObjectURL(blob);
	console.log(url);
	const link = document.createElement('a');
	link.style.display = 'none';
	link.href = url;
	link.setAttribute('download', 'Excel-收款人账户.xls'); //文件名后缀
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link); //下载完成移除元素
	window.URL.revokeObjectURL(url); //释放掉blob对象

6、vxe-table判断使用checkbox-config还是radio-config

vue动态绑定属性名

要根据配置来读取表格是单选还是多选

<vxe-table :[attributeConfig]="{ trigger: 'row', highlight: true }"></vxe-table>

onMounted(() => {
    if(JSON.parse(props.configdata.specialfield)?.singleSelect){
        attributeConfig.value = 'radio-config';
    }else {
        attributeConfig.value = 'checkbox-config'
    }
});

7、使用扩展运算符'xxx' is not iterable报错

在JavaScript中，如果你尝试使用扩展运算符（...）去迭代一个不可迭代对象，就会抛出"xxx is not iterable"的错误。可迭代对象通常是数组、字符串、Map、Set等，它们实现了可迭代协议，可以被迭代。不可迭代对象则不支持这个协议，不能使用扩展运算符。

解决方法：转换为数组（兼容表格复选和单选选中的值的获取）

const checkboxSelectedRows = basicTableRef.value[0].tableRef.getCheckboxRecords()
		? basicTableRef.value[0].tableRef.getCheckboxRecords()
		: [];
    const radioSelectRows = [];
    if(basicTableRef.value[0].tableRef.getRadioRecord()){
        radioSelectRows.push(basicTableRef.value[0].tableRef.getRadioRecord())
    }

8、element-plus @change事件保留默认参数，并传递自定义参数

使用es6箭头函数写法，这样，既能传递默认参数，也能传递自定义参数。

<el-checkbox-group v-model="checkList">
	<el-checkbox
		v-if="item.is_enabled == 1 && item.remark == 'titleCheckBox'"
		:label="item.name"
		:value="item.property_name"
		@change="(val) => changeChecxbox(val, item.property_name)"
		/>
</el-checkbox-group>