VUE3-组件问题
文章目录
一、S-Table
1.table刷新问题
问题描述
一个页面存在两个S-table，经检查均无误，第一个S-Table刷新可用，第二个刷新不可用
问题展示
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调用刷新：
问题解决
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()
}
2.分页问题
问题描述
s-table与a-table的页码取消不一样
a-table可以通过:pagination="false"取消分页
<a-table ref="tableDetail" :dataSource="dataSource" :columns="columns" :pagination="false" />
s-table官网显示，也可以使用此方法，但是实际使用中发现并不生效，需要使用:showPagination="false"
//不生效
<s-table
ref="table"
:columns="columns"
:data="loadData"
:alert="false"
:showPagination="false"
bordered
:row-key="(record) => record.id"
>
//</s-table>
//可用---仅不显示分页，页面数量限制仍存在
<s-table
ref="table"
:columns="columns"
:data="loadData"
:row-key="(record) => record.id"
:pagination="{
position: ['none']
}"
:tool-config="toolConfig"
bordered
class="ant-table-striped"
>
3. s-table和columns初始化不完整，造成table文件的filter报错
速通-链接地址：s-table和columns初始化不完整，造成table文件的filter报错
4. 多种情况下合并单元格(S-Table+Vue3)
速通-链接地址：多种情况下合并单元格(S-Table+Vue3)
5. s-table通过Promise可不调用后端接口返回前端自己创建或维护的数据
s-table获取loadData时，若没有接口，应该如何自己先进行前端开发
速通-链接地址：s-table通过Promise可不调用后端接口返回前端自己创建或维护的数据
6.S-table和a-table组合的内嵌表格
链接：直达链接
外部表格可编辑，内部表格有分页，且每次只能打开一个收缩框
<s-table
ref="table"
:columns="columns"
:data="loadData"
:tool-config="toolConfig"
:rowKey="(record) => record.id"
@expand="getChildData"
:expandedRowKeys="expandedRowKeys"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,getCheckboxProps:getCheckboxProps }"
>
<!-- 表格内嵌核心属性，需要配合使用，单个使用不生效-->
<!-- @expand="getChildData"-->
<!-- :expandedRowKeys="expandedRowKeys"-->
<template #operator class="table-operator">
<!-- 在表格外增加操作按钮-->
</template>
<template #bodyCell="{ record,column }">
<!-- 对表格内容进行编辑-->
</template>
<template #expandedRowRender="{record}">
<a-table
:columns="innerColumns"
:data-source="innerData"
:pagination="paginationData"
@change="handleTableChange"
>
</a-table>
</template>
</s-table>
const expandedRowKeys = ref([])
//每次请求都会默认请求两次，不清楚什么原因
const getChildData = (expanded, record)=>{
if(expanded){
expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
expandedRowKeys.value.push(record.id)
systemId.value = record.id
innerLoadData()
}else{
expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
systemId.value = ''
return
}
}
const getChildData = (expanded, record)=>{
if(expanded){
expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
expandedRowKeys.value.push(record.id)
systemId.value = record.id
innerLoadData()
}else{
expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
systemId.value = ''
return
}
}
//由于内部使用的是a-table，需要使用分页功能，s-table试过了，未能实现目标要求
const innerData = ref()
const paginationData = ref({
total: 0,
current: 1,
pageSize: 10,
})
const innerLoadData = ()=>{
const params = {
...paginationData.value,
ip:searchFormState.value.systemIp,
systemId:systemId.value
}
assetApi.getSelPageBySystemId(params).then((res)=>{
innerData.value = res.records
paginationData.value.total = res.total
paginationData.value.current = res.current
paginationData.value.pageSize = res.size
})
}
const handleTableChange = (pagination, filters, sorter) => {
paginationData.value.current = pagination.current
paginationData.value.pageSize = pagination.pageSize
innerLoadData()
}
二、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.youkuaiyun.com/qq_42365082/article/details/122477797
三、input 框为不可编辑状态
直达：https://segmentfault.com/a/1190000040562337?utm_source=sf-similar-article
效果：
可粘贴，可复制，但是不可编辑
四、Echarts组件未渲染
问题：
解释：
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，你必须保证此文档已就绪。
https://blog.youkuaiyun.com/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',
}])
六、子组件渲染问题
1.问题概述：
时常会遇到，子组件已经接收到数据了，但是子组件样式提前渲染的问题。除了使用定时器延时显示之外，还有一个更方便的操作，使用timer，原理与监控器相同，当timer发生变化，那就会重新渲染页面，是的数据被展示出来。
2.问题解决
框架绑定。
设置初始值。
初始化完成后重新获取时间，重新渲染。
扫一扫
2662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
