ElementUI之checkbox绑定数据和后端不一对的选中与不选中

先演示Html代码：

<el-checkbox label="查看"
                             :true-label=1
                             :false-label=0
                             v-model="item.init"
                             @change="checked=>changeItem(checked,index,'init')">

这里需要用到两个内容：:true-label, :false-label

上图是官方的参数说明。

如果你的服务端返回的是字符串就用 :true-label="1" ，如果是数字就是:true-label=1

v-model="item.init" 这里绑定对应的变量即可。

let app = new Vue({
        el:'#app',
        data(){
            return {
                cateList:[
                    {title:'新闻资讯',init:1,add:1,edit:1,del:1,listorder:1,remove:1},
                    {title:'行业新闻',init:0,add:0,edit:1,del:1,listorder:1,remove:1}
                ]
            };
        },
methods:{
            checkAll(checked,index){
               
            },
            changeItem(checked,index,type){
                console.log(checked,index,type);
                this.cateList[index][type] = checked==true?1:0;
                //处理全选状态
            }
        },

 这样一来我们就可以绑定的值和我们后台返回的值一致。