La tabla de elementos de Vue cierra y expande la fila especificada

Acabo de usar la función de expansión de la tabla de elementos para ajustar las necesidades del cliente, pero necesito agregar botones y hacer clic para expandir. Revisé el sitio web oficial, lo descubrí y lo compartí con ustedes.

Utilice este método de la tabla para cambiar el estado expandido   toggleRowExpansion  :

Escribe primero

handleEdit(index, row) {
  this.$refs.refTable.toggleRowExpansion(row) //只需要这一句就好了
  this.show =true
  console.log(index, row);
},

 

Luego, debido a que usamos el método toggleRowExpansion de refTable, necesitamos poner ref = "refTable" en la tabla

Finalmente, llámalo en el botón de la página para lograr

Lo mismo

Haga clic en una fila. Aquí no usamos row_click. Usamos cell_click y luego juzgamos que cllIndex no es el subíndice de [0]. La ventaja es que la flecha triangular que viene con él no será inválida, y el botón de juicio columna

Simplemente escriba el método y llámelo en la etiqueta del formulario

    cellClick(row, column, event) {
        if(event.cellIndex != 0 && event.cellIndex != 4){
          this.$refs.refTable.toggleRowExpansion(row)
        }
      }