Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

When i try to sort by using either first or second columns, the rows are sorted except for the checkbox in the last column. Is the last column disjoint based on my code?

<el-table :data="items" stripe style="width: 50%">
                <el-table-column prop="email" label="email" sortable></el-table-column>
                <el-table-column prop="username" label="Username" sortable></el-table-column>
                <el-table-column label="Enable">
                    <template slot-scope="scope">
                        <el-checkbox :checked="scope.row.isSelected" @change="toggleEnable(scope.row)"  />
                    </template>
                </el-table-column>
            </el-table>
So basically the DOM isn't changed so Vue doesn't recognize the change. To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. In case of element ui table you should fill the row-key attribute. Which is listed in table-atributes
Adding the row-key will solve your challenge
An alternative way to make it work is replacing the :checked by v-model. but still it's good to provide the row-key
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.