Element Plus 组件库 - Select 选择器 value 为 index 时的一些问题

Select 选择器 value 为 index 时的一些问题

html 复制代码

<el-select v-model="packageSelect" placeholder="请选择升级包">
    <el-option v-for="(item, index) in packages" :key="item.id" :label="`${item.packageName}（${item.host}）`" :value="index" />
</el-select>

<el-button @click="deleteFirstItem">删除第一项（模拟数据变化）</el-button>
<el-button @click="showSelectedInfo">显示当前选中信息</el-button>

js 复制代码

const packageSelect = ref(null);

const packages = ref([
    { id: 1, packageName: "升级包 A", host: "192.168.1.1" },
    { id: 2, packageName: "升级包 B", host: "192.168.1.2" },
    { id: 3, packageName: "升级包 C", host: "192.168.1.3" },
]);

const deleteFirstItem = () => {
    packages.value.shift();
};

const showSelectedInfo = () => {
    if (packageSelect.value === null) {
        console.log("请先选择一个项");
        return;
    }

    const selectedItem = packages.value[packageSelect.value];

    console.log("当前选中的项：", selectedItem);
};

用户选择"升级包 A"，此时，packageSelect 为 1，点击"显示当前选中信息"，输出结果如下

当前选中的项： Proxy(Object) {id: 2, packageName: '升级包 B', host: '192.168.1.2'}
点击"删除第一项"后，数据变为如下

js 复制代码

[
    { id: 2, packageName: "升级包 B", host: "192.168.1.2" },
    { id: 3, packageName: "升级包 C", host: "192.168.1.3" },
]

此时，packageSelect 任然为 1，点击"显示当前选中信息"，输出结果如下

当前选中的项： Proxy(Object) {id: 3, packageName: '升级包 C', host: '192.168.1.3'}

问题是用户原本选择的是"升级包 B"，数据变化后，选择变成了"升级包 C"

解决方案

使用唯一标识符作为 value 值

html 复制代码

<el-select v-model="packageSelect" placeholder="请选择升级包">
    <el-option v-for="item in packages" :key="item.id" :label="`${item.packageName}（${item.host}）`" :value="item.id" />
</el-select>

<el-button @click="deleteFirstItem">删除第一项（模拟数据变化）</el-button>
<el-button @click="showSelectedInfo">显示当前选中信息</el-button>

js 复制代码

const packageSelect = ref(null);

const packages = ref([
    { id: 1, packageName: "升级包 A", host: "192.168.1.1" },
    { id: 2, packageName: "升级包 B", host: "192.168.1.2" },
    { id: 3, packageName: "升级包 C", host: "192.168.1.3" },
]);

const deleteFirstItem = () => {
    packages.value.shift();
};

const showSelectedInfo = () => {
    if (packageSelect.value === null) {
        console.log("请先选择一个项");
        return;
    }

    const selectedItem = packages.value.find((item) => item.id === packageSelect.value);

    console.log("当前选中的项：", selectedItem);
};

使用拼接后的字符串作为 value 值

html 复制代码

<el-select v-model="packageSelect" placeholder="请选择升级包">
    <el-option v-for="item in packages" :key="item.packageName + item.host" :label="`${item.packageName}（${item.host}）`" :value="item.packageName + item.host" />
</el-select>

<el-button @click="deleteFirstItem">删除第一项（模拟数据变化）</el-button>
<el-button @click="showSelectedInfo">显示当前选中信息</el-button>

js 复制代码

const packageSelect = ref(null);

const packages = ref([
    { packageName: "升级包 A", host: "192.168.1.1" },
    { packageName: "升级包 B", host: "192.168.1.2" },
    { packageName: "升级包 C", host: "192.168.1.3" },
]);

const deleteFirstItem = () => {
    packages.value.shift();
};

const showSelectedInfo = () => {
    if (packageSelect.value === null) {
        console.log("请先选择一个项");
        return;
    }

    const selectedItem = packages.value.find((item) => item.packageName + item.host === packageSelect.value);

    console.log("当前选中的项：", selectedItem);
};

使用 index 作为 value 值，同时在数据变化时，手动将 packageSelect 重置为 null

html 复制代码

<el-select v-model="packageSelect" placeholder="请选择升级包">
    <el-option v-for="(item, index) in packages" :key="item.id" :label="`${item.packageName}（${item.host}）`" :value="index" />
</el-select>

<el-button @click="deleteFirstItem">删除第一项（模拟数据变化）</el-button>
<el-button @click="showSelectedInfo">显示当前选中信息</el-button>

js 复制代码

const packageSelect = ref(null);

const packages = ref([
    { id: 1, packageName: "升级包 A", host: "192.168.1.1" },
    { id: 2, packageName: "升级包 B", host: "192.168.1.2" },
    { id: 3, packageName: "升级包 C", host: "192.168.1.3" },
]);

const deleteFirstItem = () => {
    packages.value.shift();
    packageSelect.value = null;
};

const showSelectedInfo = () => {
    if (packageSelect.value === null) {
        console.log("请先选择一个项");
        return;
    }

    const selectedItem = packages.value[packageSelect.value];

    console.log("当前选中的项：", selectedItem);
};