html
1. Option logic: Confirm based on the value attribute value that comes with the option, then obtain the option selected by the user through e.target.value, and then declare an option variable to receive the option after the user clicks
js code:
2. Single-select logical idea: You need to obtain the click state and click value of the user's click. Here you can define what to bind. It is recommended to bind the uniqueness of the id, because the click value will change, so the value bound here is It is dynamic. These two values are obtained through the click event e, and are processed through the selected bound by the v-model two-way binding event. As long as the option is a single selection, the selected array will be cleared. If the checked value is true, then just assign the selected value to the selected array. Because the obtained value is of string type, it needs to be wrapped in an array.
js code:
3. Select all logical idea: Determine whether to select all according to the status value of whether the select all option box is selected. If it is in the selected state, traverse the list to obtain all the ids of the current page, and push all the ids of the current page into the selected array. If it is not in the selected state, clear the selected array
js code:
4. Inverse selection logic: declare a new array, traverse the entire list, and obtain the selected array through two-way binding of selected. Use the includes() method to determine whether the list id is included in the selected array, and return a Boolean value. When this is fasle, push the unselected values into the new array, and then assign the new array to the selected array.
js code:
5. Logical idea of batch deletion: Convert the id selected in the array into a string through the join array method, determine whether the selected array has a value, and if so, call the delete interface to delete it.
js code:
js declaration code:
