There is a multi-check box in the table in vue, how to use the button on the pop-up layer to decide whether to change the selected state.

Mar.14,2021

Vue is the MVVM framework. In all MVVM frameworks, we should ignore the DOM structure and find ways to operate in a way that abstracts data.

when you take off the restrictions of DOM and look in the direction of the data, there is nothing complicated.

  1. first of all, the checkbox should be associated with a value, such as list [n] .isSelect
  2. when you open the pop-up window, pass the object of this node to the pop-up window
  3. when you click OK or cancel, manipulate the value of this object
  4. give the rest to Vue

when you click, save the row index when you click, and then make sure that the item in the specified row is not true.


encapsulate the row elements of Table into components, generate it through a convenient loop, and then use the uniqueness flag of row.id, such as
${row.id} checked to set the state value


.

seal up what needs to be done first, and then execute it when you are sure.

handleClick (row) {
   this.exampleDialog = true;
   this.ok_func = (row)=>{
      //
   }
}
ok () {
  if (this.ok_func){
    this.ok_func();
    delete this.ok_func;
  }
}
Menu