知识介绍
- 对json数据进行优化
- 使用vuex完成不同components之间的参数
代码分析
1. 对json数据进行优化
原数据:
"connections": [
{
"X_point": {
"coords": [
13327354.751253285,
3229146.982745276
],
"name": "3,1,44"
},
"Y_transformed_point": {
"coords": [
13327356.448199026,
3229121.5529443296
],
"text": "01NB01"
},
"matched": 0
},
{
"X_point": {
"coords": [
13327354.529195061,
3229140.083845076
],
"name": "3,1,43"
},
"Y_transformed_point": {
"coords": [
13327356.448199026,
3229121.5529443296
],
"text": "01NB01"
},
"matched": 0
}
]
优化(对于x和y,分别只保留name和text):
const optimizeConnections = (connections) => {
return connections.map(connection => ({
X_point: connection.X_point.name, // 直接取原来的 name
Y_transformed_point: connection.Y_transformed_point.text, // 直接取原来的 text
matched: connection.matched // 保持 matched 不变
}));
};
2. 使用vuex完成不同components之间的参数
- 首先在./store/index.js中定义state和mutations
import { createStore } from 'vuex'
export default createStore({
state:{
selectedPoints:[] // 在matchTable中选中所选择的组串编号
},
getters:{
},
mutations:{
setSelectedPoints(state, points) {
state.selectedPoints = points;
}
},
actions:{
},
modules:{
}
})
- 在./components/matchTable.vue中,将选中的组串编号保存到store中
2.1 导入store:import store from '@/store';
2.2 在对要传递的参数进行处理的函数中,将选中的组串编号保存到store中(某一个coponent中)
const customRow = (record) => {
return {
onClick: () => {
const index = selectedRowKey.value.indexOf(record.X_point);
if (index >= 0) {
// 如果行已被选中,则从数组中移除
selectedRowKey.value.splice(index, 1);
} else {
// 如果行未被选中,则添加到数组中
selectedRowKey.value.push(record.X_point);
}
// 更新Vuex状态
store.commit('setSelectedPoints', selectedRowKey.value);
},
};
};
- 在另一个component中,监听store中的状态,并获取到选中的组串编号
3.1 导入store:import store from '@/store';
3.2 监听store中的状态,并获取到选中的组串编号
watch(()=>store.state.selectedPoints.length, (newSelectedPoints) => {
console.log('选中的X_point变化:', newSelectedPoints);
}, {immediate: true });
标签:Vue,21,point,text,知识,name,选中,store,matched
From: https://www.cnblogs.com/Frey-Li/p/18424979