VUE3-组件问题

一、S-Table

1.问题描述

一个页面存在两个S-table，经检查均无误，第一个S-Table刷新可用，第二个刷新不可用

2.问题展示

S-Table1：

				<s-table
					ref="tableOperation"
					:columns="columnsOperation"
					:data="loadDataOperation"
					:row-key="(record) => record.id"
					:scroll="{ x: 1500 }"
					:tool-config="toolConfig"
					bordered
				>
					<template #operator>
						<a-space>
							<a-button style="margin-top: 8px" type="primary" @click="addOperation">
								<template #icon>
									<plus-outlined/>
								</template>
								添加运营
							</a-button>
						</a-space>
					</template>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'action'">
							<a-button type="link" @click="editOperation(record)">编辑</a-button>
							<a-button type="link" @click="deleteOperation(record)">删除</a-button>
						</template>
					</template>
				</s-table>

S-Table2：

					<s-table
						ref="tableAssets"
						:columns="columnsAssets"
						:data="loadDataAssets"
						:row-key="(record) => record.id"
						:scroll="{ x: 1500 }"
						bordered
					>
						<template #bodyCell="{ column, record }">
							<template v-if="column.dataIndex === 'action'">
								<a-button type="link" @click="editAssets(record)">
									<EditOutlined />
									编辑
								</a-button>
								<a-button type="link" @click="deleteAssets(record)">
									<DeleteOutlined />
									删除
								</a-button>
							</template>
						</template>
					</s-table>

在onMounted调用刷新：

3.问题解决

S-Table2在S-Table1的操作栏的查看资产Modal中，所以每次添加完新的资产不需要refresh，只有当点击事件发生，Modal框出现后，S-Table2获取数据的方法才会自动实行，但是对不同行的S-Table1的查看资产进行操作时，S-Table2不会重新获取数据，此时需要刷新table，重新渲染数据。
报错原因时当第一次点击查看资产时，由于从未获取过S-Table2的数据，所以此时的tableAssets.value为undefined，里面也不会有refresh方法，此时调用就会报错。
经过测试，可以在点击事件发生后，调取数据获取到后的钩子函数，在函数内进行tableAssets.value.refresh()，或者直接在点击事件发生时，加入下面的条件，在第一次点击不调取refresh，也可避免该问题。

	if(tableAssets.value != undefined){
		tableAssets.value.refresh()
	}

二、form表单无法显示

1.问题描述

						<a-form
							ref="securityReportingDataRef"
							:model="securityReportingData"
							:rules="securityReportingDataRules"
							:label-col="4"
							:wrapper-col="20">
							<a-form-item label="报告标题" name="reportHeading">
								<a-input v-model:value="securityReportingData.reportHeading" placeholder="请输入报告标题"/>
							</a-form-item>
							<a-form-item label="报告详情" name="reportDetails">
								<a-textarea v-model:value="securityReportingData.reportDetails" placeholder="请输入报告详情"/>
							</a-form-item>
							<a-form-item >
								<a-button @click="show">关闭</a-button>
							</a-form-item>
						</a-form>

JS：

const  securityReportingData = reactive()
const  securityReportingDataRef = ref()
const  securityReportingDataRules = {
	reportHeading:[{ required: true, message: '请输入报告标题', trigger: 'blur' }],
	reportDetails:[{ required: true, message: '请输入报告详情', trigger: 'blur' }]
}
const  sampleGraphData = reactive()

const show = () =>{
	console.log(securityReportingData,'securityReportingData')
}

2.问题展示

报错：

3.问题解决

VUE3中有两种声明方法ref和reactive

将const securityReportingData = reactive()换成const securityReportingData = reactive({})即可，
或者定义为const securityReportingData = ref()

详情可了解：https://blog.csdn.net/qq_42365082/article/details/122477797

三、input 框为不可编辑状态

直达：https://segmentfault.com/a/1190000040562337?utm_source=sf-similar-article
效果：
可粘贴，可复制，但是不可编辑

四、Echarts组件未渲染

问题：

解释：
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，你必须保证此文档已就绪。

https://blog.csdn.net/xb_2015/article/details/85337187
解决：

onMounted(() => {
	nextTick(()=>{
		initChart()
	})
})

延申：
同时，如果父元素的传值发生变化，子元素应该及时刷新渲染，可以对变化数据添加监听

watch(() =>props.chartData,
	(newVal, oldVal) => {
		initChart();
	},
	{
		deep: true,
	}
)

但是在处理时，发现数据有时请求无法自动赋值，也可以增加一步手动赋值

let initChart = () => {
	ydata.value = props.chartData.ydata
	lowRiskNum.value = []
	mediumRiskNum.value = []
	highRiskNum.value = []
	severityNum.value = []
	props.chartData.xdata.forEach((item) => {
		lowRiskNum.value.push({value: item.lowRiskNum})
		mediumRiskNum.value.push({value: item.mediumRiskNum})
		highRiskNum.value.push({value: item.highRiskNum})
		severityNum.value.push({value: item.severityNum})
	})
	Echarts = echarts.init(document.getElementById('lineCharts1'))
	// 绘制图表
	Echarts.setOption(option.value)
	// 自适应大小
	window.addEventListener('resize', onResize(Echarts))
}

五、图片正常引用，但是部署服务器部署不上去，看不到图片

1.图片引用类型

背景引用：

.service-item.item005 {
	width: 299px;
	height: 100px;
	background-image: url(src/assets/images/logo_2.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;
}

声明实例引用：

const scopeServicesList = ref([{
	img: 'src/assets/images/imgScop4.png',
	title: 'xxx',
	introduce: 'xxxxx',
}])

2.问题解决

背景引用：

<div class="service-item item005" :style="{backgroundImage:'url('+$TOOL.getAssetsFile('logo_2.jpg')+')'}"></div>

声明实例引用：
在utils/tool.js中引入：

//动态引用图片
tool.getAssetsFile = (name) => {
	return new URL(`../assets/images/${name}`, import.meta.url).href
}

import tool from '@/utils/tool';


const scopeServicesList = ref([{
	img:tool.getAssetsFile('imgScop4.png'),
	title: 'xxx',
	introduce: 'xxxxx',
}])