使用el-switch實現開關（更改狀態后展示狀態）

今天做了一個用戶權限的功能，里面用到了開關，

 

 

 代碼實現：

頁面：

<el-switch  v-model="scope.row.status"   @change="disable(scope.row)">      </el-switch>

js：

 disable(row) {
            const { status, userId } = row
            let params = {
                userId: userId,
                status: status ? '1' : '0'  // 三元運算符  類似於if else  
            };
            updateStatus(params).then(res => {
                if (res.code === 0) {
                    this.$message.success(`${status ? '已啟用' : '已停用'}`)
                    this.queryList();
                }
            });
        },

OK，寫到這步就已經實現了，前端向后台傳入狀態值，那怎么后端返回來的狀態值怎么展示到頁面上呢 ？

看下面代碼：

  

queryAllUser(params).then(res => {
                if (res.code === 0) {
                    const arr = res.data.records;//  返回來的值
                    arr.forEach(item => {     // 循環一下
                        if (item.status === '0') {
                            item.status = false //賦值
                        } else {
                            item.status = true
                        }
                    })
                    this.tableData = arr
 
                }
            });

　　

over~~~