À l'origine, je voulais lier l'état de la case à cocher via une certaine propriété de chaque objet de la liste, mais j'ai rencontré un problème : après avoir cliqué sur la case à cocher, les données ont changé, mais la vue n'a pas changé. Lorsque vous cliquez sur d'autres lignes, La carte numérique précédente sera mise à jour. Comme le montre la figure ci-dessous, la première fois pour vérifier la première ligne ne répond pas, puis cliquez sur d'autres lignes pour mettre à jour la vue.
<el-table-column label="是否绑定" min-width="50">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.binded">是否绑定</el-checkbox>
</template>
</el-table-column>
Solution de contournement : mise à jour via les vues basées sur les données
Liez el-checkboxun attribut personnalisé. Par exemple data-a=responsive, lorsque la case est cochée, @changeun événement est déclenché. Dans le gestionnaire d'événements, la responsivevaleur modifiée met à jour la vue.
<el-table-column label="是否绑定" min-width="50">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.binded" :data-a="checked" @change="update()">是否绑定</el-checkbox>
</template>
</el-table-column>
<script>
export default {
data() {
return {
responsive: true
}
}
method: {
update(){
this.responsive = !this.responsive //数据驱动vue视图更新，解决checkbox视图不更新的问题
},
}
}
</script>