Cómo agregar dinámicamente elementos de formulario en Vue
En mi proyecto, encontré dos escenarios para agregar elementos de formulario dinámicamente, uno se agrega al formulario y el otro se agrega a la tabla. Me alegré un poco cuando me di cuenta de estos dos. Ahora, mirando hacia atrás, encuentro que estos dos son en realidad iguales y que puedes elegir según tus preferencias personales en el futuro.
Aquí, debido a que los elementos del formulario que se agregarán tienen una relación padre-hijo, hay muchos hijos que agregar y las propiedades de los padres son consistentes, este método puede reducir las operaciones repetidas. No entraré en detalles sobre el estilo del formulario, pero mire la imagen para obtener más detalles
Aquí la pestaña es el contenido que debe insertarse en las pestañas de la matriz cada vez que agregamos un subformulario.
2. Vincule un método addTab() al botón Agregar elemento, que se utiliza para insertar un elemento en la matriz cada vez que se agrega un subformulario.
3. Formatee el formulario. elementos La escritura es la misma que la normal, excepto que el enlace de datos es diferente, debe estar vinculado a los elementos en la pestaña
4. Si desea eliminar pestañas redundantes, debe declarar un removeTab () en
La tabla aquí también tiene una relación padre-hijo, pero la forma de visualización es diferente. Debido a que aún es necesario mostrar los datos de fondo, se utiliza una tabla para implementarlos.
1. Declare el componente de la tabla bajo una etiqueta para cargarlo dinámicamente en función de los datos de fondo.
2. Para el contenido que debe editarse en la tabla, puede declarar un cuadro de entrada debajo de la etiqueta y usar ranuras para implementar el enlace de datos.
3. Igual que arriba, declara un método addRow() para aumentar el número de filas en la tabla.
4. Para eliminar filas no deseadas, debe agregar el método deleteRow() correspondiente