Element3.0 + vue3.0 cuadro de selección múltiple desplegable el-select el-select establece el valor predeterminado no se puede eliminar la función
Element-UI es una biblioteca de componentes Vue.js ampliamente utilizada, entre los cuales el componente del cuadro de selección múltiple desplegable El-Select se usa a menudo en el desarrollo de proyectos reales. Sin embargo, en la versión Element 3.0, el valor predeterminado del cuadro de selección múltiple desplegable El-Select se puede eliminar, lo que puede causar algunas situaciones inesperadas. Este artículo presentará cómo resolver este problema y realizará la función de que el valor predeterminado del cuadro de selección múltiple desplegable El-Select no se puede eliminar.
Escenas
Supongamos que estamos desarrollando una página de selección de productos. En la condición de filtro de selección múltiple del estado del producto, hay una opción "predeterminada", que se utiliza para seleccionar el producto en el estado predeterminado. Queremos que el usuario no pueda anular la selección de la opción "Predeterminada" para garantizar que se seleccione al menos un estado.
Análisis funcional
- En primer lugar, el-select no admite esta función. Como máximo, el atributo deshabilitado de el-option puede estar prohibido
. Código fuente:
Entonces necesitamos cambiar el código y establecer la propiedad select-tag-close-none en none cuando el-option deshabilitado es verdadero
En combate real, simplemente coloque el siguiente código en mian.js
亿点小知识：vue3.0中是 app.directive 在 vue2.0中是 Vue
en vue3.0
app.directive("defaultSelect", {
componentUpdated(el, bindings) {
const [values, options, prop, defaultProp, defaultValue] = bindings.value;
const indexs = [];
const tempData = values.map(item => options.find(op => op[prop] === item));
tempData.forEach((item, index) => {
if (item[defaultProp] === defaultValue) {
indexs.push(index);
}
});
const dealStyle = function(tags) {
tags.forEach((el, index) => {
if (indexs.includes(index) && ![...el.classList].includes("select-tag-close-none")) {
el.classList.add("none");
}
});
};
const tags = el.querySelectorAll(".el-tag__close");
if (tags.length === 0) {
setTimeout(() => {
const tagTemp = el.querySelectorAll(".el-tag__close");
dealStyle(tagTemp);
});
} else {
dealStyle(tags);
}
}
});
Lo anterior es el cuadro de selección múltiple desplegable el-select el-select establece el valor predeterminado y no se puede eliminar. Gracias por leer.
Si encuentra otros problemas, puede discutirlo y estudiarlo conmigo en privado.
Si es así Te será útil, por favor 点赞márcalo como favorito. ¡Gracias~!
Presta atención a los bloggers favoritos y seguiremos actualizando...