关于antdesign:antd-vue-获取半选节点以及全选节点

一: 效果图如下:

二: 实现过程

(2-1)通过角色 id 获取须要要数据

因为我这个性能是角色调配权限，所有这里是通过角色 id 获取已调配的权限菜单以及全副菜单

而后在获取到树结构的菜单数据

代码如下:

 /**
     * 调配权限按钮
     */
    permissions(row) {
      this.permissionsConfirmLoading = true
      getRoleTree(row.roleId)
        .then(res => {// 获取以后用户角色调配菜单的 id data 例如:[1002, 1003, 1004, 1213, 1214, 1000, 1001]
          this.checkedKeys = res.data.data.checkedMenuId
          // 获取菜单的全副 id data 例如[1002, 1003, 1004, 1213, 1214, 1000, 1001]
          this.allMenuIds = res.data.data.menuIds
 
          // 这一步是预防用户不点击节点选项间接保留
          this.menuIds = res.data.data.checkedMenuId.join(',')
          return getMenuTree()})
        .then(response => {
          this.treeData = response.data.data
          this.roleId = row.roleId
          this.permissionsConfirmLoading = false
          this.permissionsModalVisible = true
        })
    }

(2-2)页面的配置

代码如下:

<a-modal
      :visible="permissionsModalVisible"
      title="调配权限"
      :width="740"
      @cancel="permissionsModalVisible = false"
    >
      <a-spin :spinning="permissionsConfirmLoading">
        <a-tree
          ref="roleTree"
          :checked-keys="checkedKeys"
          :selected-keys="selectedKeys"
          checkable
          :check-strictly="checkStrictly"
          :expanded-keys="expandedKeys"
          :tree-data="treeData"
          :replace-fields="{key:'id'}"
          @check="onChangePermissionsTree"
          @select="onTreeNodeSelect"
          @expand="onExpand"
        />
      </a-spin>
      <template slot="footer">
        <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="switchCheckStrictly(1)">
              父子关联
            </a-menu-item>
            <a-menu-item key="2" @click="switchCheckStrictly(2)">
              勾销关联
            </a-menu-item>
            <a-menu-item key="3" @click="checkALL">
              全副勾选
            </a-menu-item>
            <a-menu-item key="4" @click="cancelCheckALL">
              勾销全选
            </a-menu-item>
            <a-menu-item key="5" @click="expandAll">
              开展所有
            </a-menu-item>
            <a-menu-item key="6" @click="closeAll">
              合并所有
            </a-menu-item>
          </a-menu>
          <a-button>
            树操作
            <a-icon type="up" />
          </a-button>
        </a-dropdown>
        <a-button @click="permissionsModalVisible = false">
          cancal
        </a-button>
        <a-button type="primary" @click="permissionsModalSubmit">
          ok
        </a-button>
      </template>
    </a-modal>

(2-3)对应的办法

代码如下:

// 是否设置树组件父子关联
    switchCheckStrictly(v) {if (v === 1) {this.checkStrictly = false} else if (v === 2) {this.checkStrictly = true}
    },
    // 是否设置树组件全副勾选
    checkALL() {this.checkedKeys = this.allMenuIds},
    // 是否设置树组件勾销全副勾选
    cancelCheckALL() {this.checkedKeys = []
    },
    // 树组件全副开展
    expandAll() {this.expandedKeys = this.allMenuIds},
    // 树组件全副闭合
    closeAll() {this.expandedKeys = []
    },
    // 树组件开展触发
    onExpand(expandedKeys) {this.expandedKeys = expandedKeys},
    // 点击树节点触发
    onTreeNodeSelect(id) {if (id && id.length > 0) {this.selectedKeys = id}
    },
    // 点击复选框，获取曾经选中的复选项 id+ 半选 id
    onChangePermissionsTree(node, event) {if (this.checkStrictly) {this.checkedKeys = node.checked} else {this.checkedKeys = node}
    },

(2-4)最初的保留

// 更新权限
    permissionsModalSubmit() {updPermissions(this.roleId, this.checkedKeys.join(',')).then(res => {if (res.data.data) {// resetRouter()
          store.dispatch('GenerateRoutes') // 刷新菜单
          // store.dispatch('GetInfo') // 刷新用户权限
          this.permissionsModalVisible = false
          return this.$message.success('保留胜利!')
        } else {return this.$message.error('保留失败!')
        }
      })
    },

最初 data 的数据(懒的一个一个找进去，自行取须要的)

roleId: '',
      checkStrictly: true,
      autoExpandParent: true,
      loading: false,
      roleModalTitle: '',
      roleModalType: 0,
      roleModalVisible: false,
      permissionsModalVisible: false,
      roleConfirmLoading: false,
      permissionsConfirmLoading: false,
 
      formItemLayout: {
        labelCol: {xs: { span: 24},
          sm: {span: 5}
        },
        wrapperCol: {xs: { span: 24},
          sm: {span: 13}
        }
      },
 
      // 自定义分页
      pagination: {
        total: 0,
        defaultPageSize: 10,
        showTotal: total => ` 共 ${total} 条数据 `,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (current, size) => (this.queryParam.size = size),
        onChange: (page, pageSize) => this.onPageChange(page)
      },
 
      queryParam: {
        current: 1,
        size: 10,
        roleName: ''
      },
 
      form: this.$form.createForm(this, 'form'),
      treeData: [],
      allMenuIds: [],
      checkedKeys: [],
      selectedKeys: [],
      expandedKeys: [],