解决：分配权限处于勾选状态，把他换成取消，点击确定后再次点击分配权限按钮依旧是勾选状态，刷新了才能好，但是分配权限处于未选中状态，点击勾选，点击确定后再次点击分配权限按钮，分配权限处于勾选状态。

问题：

下面这段代码在测试中会出现一个问题：分配权限处于勾选状态，把他换成取消，点击确定后再次点击分配权限按钮依旧是勾选状态，刷新了才能好，但是分配权限处于未选中状态，点击勾选，点击确定后再次点击分配权限按钮，分配权限处于勾选状态。

<!-- 权限弹层 -->
<el-dialog :visible.sync="showPermissionDialog" title="分配权限">
     <el-tree 
        ref="permTree" 
        check-strictly 
        node-key="id" 
        :default-checked-keys="permIds" 
        :data="permissionData" :props="{label: 'name'}" 
        show-checkbox 
        default-expand-all />
     <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="mini" type="primary" @click="btnPerOk">确定</el-button>
          <el-button size="mini" @click="showPermissionDialog = false">取消</el-button>
        </el-col>
     </el-row>
</el-dialog>

export default {
   methods: {
    // 点击分配权限确定
    async btnPerOk() {
      await assignPermissionSerivce({
        id: this.currentRoleId,
        // 拿到实例对象就可以调用本身的方法，就可以拿到对应的数据
        permIds: this.$refs.permTree.getCheckedKeys()
      })
      this.$message.success('分配权限成功')
     
      this.showPermissionDialog = false
    }
  }
}

原因：

这个问题是由于Vue的数据响应机制引起的。在Vue中，`:visible.sync="showPermissionDialog"`会双向绑定`showPermissionDialog`变量，但是在点击“确定”按钮后，虽然`showPermissionDialog`被设置为`false`，但是`permIds`并没有被清空。

因此，当再次打开权限弹层时，`permIds`仍然保持之前的值，导致默认选中的权限仍然存在。解决这个问题的方法是在“确定”按钮点击后，手动清空`permIds`数组，或者在弹层关闭时（点击取消按钮时）清空该数组。

// 点击分配权限确定
async btnPerOk() {
      await assignPermissionSerivce({
        id: this.currentRoleId,
        // 拿到实例对象就可以调用本身的方法，就可以拿到对应的数据
        permIds: this.$refs.permTree.getCheckedKeys()
      })
      this.$message.success('分配权限成功')
      // 将permIds清空
      this.permIds = []
      this.showPermissionDialog = false
}