1. La boîte de dialogue Element ui n'effectuera la vérification du formulaire qu'une fois que la vérification du formulaire apparaîtra
Solution : ajouter un événement de fermeture et un événement d'ouverture pour exécuter cette commande.$refs['form'].resetFields(); après la fermeture de la fenêtre contextuelle
getOpen() {
// 移除校验状态
this.$nextTick(() => {
this.$refs.form.clearValidate();
});Le 'form' ici est la valeur de la ref définie par le formulaire. De cette manière, le formulaire peut être automatiquement réinitialisé lorsque le formulaire est soumis ou fermé.
2. La boîte de dialogue de l'interface utilisateur de l'élément peut ne pas obtenir la valeur valide pour la vérification du formulaire, de sorte que le bouton OK ne peut pas effectuer la vérification du formulaire.
Solution : transformer la boîte de dialogue de l'interface utilisateur de l'élément en un composant distinct à utiliser
3. Les chaînes doivent être divisées en tableaux par des symboles
Solution : utiliser directement split(), par exemple : séparer les chaînes en tableaux par des virgules split(",")
4. Le tableau doit avoir une barre de défilement, mais la page n'a pas de barre de défilement
Solution : définir la hauteur visuelle vh sur la table
5. Pas assez qualifié pour utiliser les graphiques antv
Solution : Lisez attentivement la documentation de l'API sur le site officiel
6. Plusieurs façons de trouver des éléments spécifiés dans un tableau
7. Le formulaire de saisie pour la modification des données ne se rafraîchit parfois pas
Solution : this.$forceUpdate()
8. L'arborescence elementUI Tree modifie la hauteur de chaque ligne
solution:
.el-tree-node__content {
height: 40px;
}9. modifier la hauteur de la zone de saisie elementUI
solution:
.el-input__inner {
height: 30px;
margin-bottom: 5px;
}10. Pour modifier le style du composant, utilisez le sélecteur de profondeur
Sélecteur de profondeur :: v-deep est plus général
11. Erreur de vue : la clé de ligne prop [ElTable] est requise
Solution : Le formulaire element-ui sélectionne plusieurs options et vous devez ajouter : row-key="id" à la table el
12. La réception de Vue.js signale une solution d'erreur d'annulation non détectée (en promesse)
Solution : la méthode this.$confirm a une méthode de promesse intégrée, donc .catch() ne peut pas être supprimé (car il ne peut pas être intercepté lors de l'annulation de l'opération)
13. Après que la zone de saisie el-input utilise oninput ou onkeyup, la liaison bidirectionnelle v-model échoue.
<el-input
v-model="form.currentPayAmount"
@blur="form.currentPayAmount = $event.target.value"
@input="input($event)"
>
</el-input>
14. Résolvez le problème selon lequel la boîte d'invite n'apparaît que lorsqu'il y a deux lignes ou plus dans la table de la table element-ui
//html
<el-tooltip
placement="top"
v-model="scope.row.showTooltip"
v-if="scope.row.schedulePoints[0].moduleName != ''"
:open-delay="500"
effect="dark"
>
<div slot="content">
[{
{ scope.row.schedulePoints[1].moduleName }}]-[{
{
scope.row.schedulePoints[1].className
}}{
{ scope.row.schedulePoints[1].classNumber }}]
</div>
<div
@mouseenter="showTips($event, scope.row, scope.$index)"
class="curse"
v-if="scope.row.schedulePoints[1].moduleName != ''"
>
[{
{ scope.row.schedulePoints[1].moduleName }}]-[{
{
scope.row.schedulePoints[1].className
}}{
{ scope.row.schedulePoints[1].classNumber }}]
</div>
</el-tooltip>//js
showTips(obj, row, index) {
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
let TemporaryTag = document.createElement("span");
TemporaryTag.innerText = `[ ${row.schedulePoints[0].moduleName} ]-[${row.schedulePoints[0].className}${row.schedulePoints[0].classNumber} ]`;
TemporaryTag.className = "getTextWidth";
document.querySelector("body").appendChild(TemporaryTag);
let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
document.querySelector(".getTextWidth").remove();
/*cellWidth为表格容器的宽度*/
const cellWidth = obj.target.offsetWidth;
console.log("currentWidth" + currentWidth);
console.log("cellWidth" + cellWidth);
/*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
if (currentWidth >= 2 * cellWidth) {
row.showTooltip = true;
} else {
row.showTooltip = false;
}
},//css
.curse {
width: 100%;
text-align: left;
font-size: 16px;
color: #1c2438;
font-weight: 500;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}15. Lors de l'utilisation de la valeur clé de l'objet comme autre objet de tableau
NomObjet[AutreObjetTableau.Valeur]
16. La liste de description d'element-ui est principalement utilisée pour aligner certaines données.