When the el-table is partially selected, the full selection style is displayed, and the cause and solution of class:is-indeterminate loss

 Table of contents

1. Problems

 2. Reasons and solutions

3. Summary

---

1. Problems

1. When el-table is partially selected by default, the full selection will have the style shown in Figure 1-1. But during the development, it was found that the style was invalid, and there was no is-indeterminate class! ! ! , when part of the selection is selected, the full selection style is displayed directly , as shown in Figure 1-2.

Figure 1-1 Normal style with partial selection

Figure 1-2 Partial selection shows all selected styles

 2. Reasons and solutions

1. On what basis does elemen distinguish between fully selected and partially selected? I don't know, I don't know.

2. Finally, I remembered the row-key attribute, which should be used to distinguish different rows.

3. After setting row-key='id' (id is the unique label field name of each piece of data), it turned out to be fine.

 

4. The reason for selecting all at the beginning : No row-key is set: the key value of each piece of data is the same, the data of different rows cannot be distinguished inside the element, and all rows are regarded as the same.

3. Summary

1. After part of the el-table is selected, the semi-unselected style is displayed as a full selection. You can try to add the row-key attribute to the el-table, and set the value to the unique identification field of each row of data.

2. The problem solved in a daze, in a trance, really interesting!

/*

Hope it helps you!

If there is any mistake, welcome to correct me, thank you very much!

*/