VUE3-组件问题

文章目录

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.问题解决

	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')
}