Vue3中动态初始化el-checkbox-group和input框
本文介绍如何在Vue3项目中，利用后台返回的数据动态初始化Element Plus的el-checkbox-group组件和input输入框的状态和值。
一、el-checkbox-group初始选中状态
假设后台返回的数据格式为一个键值对对象，键表示checkbox的label，值表示是否选中(例如：1为选中，0为未选中)。 我们可以这样实现：
立即学习“前端免费学习笔记（深入）”；
import { reactive, onMounted } from 'vue';
import axios from 'axios';
const gnss = reactive({
gnssdata: [], // 存储选中的checkbox label
});
const fetchBackendData = async () => {
try {
const { data } = await axios.get('/api/gnss-data');
gnss.gnssdata = Object.entries(data)
.filter(([key, value]) => value === 1) // 过滤出选中项
.map(([key]) => key.toUpperCase().replace('_FREQ', '')); // 转换key为checkbox label
} catch (error) {
console.error('Failed to fetch backend data:', error);
}
};
onMounted(() => {
fetchBackendData();
});
在模板中：
二、input框的可编辑性和初始值
假设后台返回的数据格式与上面相同，我们可以这样处理input框：
import { reactive, onMounted } from 'vue';
import axios from 'axios';
const gnssInput = reactive({
input_gga: null,
input_rmc: null,
// ... other inputs ...
});
const fetchBackendData = async () => {
try {
const { data } = await axios.get('/api/gnss-data');
for (const [key, value] of Object.entries(data)) {
const inputKey = `input_${key.split('_')[0]}`;
gnssInput[inputKey] = value;
if (value === 0) {
// 使用ref获取dom元素，设置disabled属性
const inputElement = document.getElementById(inputKey);
if (inputElement) inputElement.disabled = true;
}
}
} catch (error) {
console.error('Failed to fetch backend data:', error);
}
};
onMounted(() => {
fetchBackendData();
});
在模板中：
改进说明:
- 使用了更简洁的
Object.entries和map方法处理数据。 - 使用
filter方法过滤出选中项，提高效率。 - 使用
axios进行网络请求，更符合现代化开发规范。 - 避免直接操作DOM，改用
ref获取元素并设置属性，提高代码可维护性。
记住根据你的实际后台数据格式调整代码中的key和value处理方式。 此方法避免了直接操作DOM，使代码更清晰、更易于维护。 确保你的el-checkbox和el-input组件的label和id与代码中的键名保持一致。
