【el-cascader-panel】组件el-cascader-panel使用踩坑

huangjinsheng1988

于 2023-11-03 21:10:04 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端 elementui

版权

开放原子开发者工作坊

文章已被社区收录

加入社区

文章讲述了如何在角色管理中使用el-cascader-panel组件展示资源树形结构，实现左侧列表查询和右侧权限选择。着重提到如何处理全选功能、组件初始化和防止动态生成时的错误，以及相关方法如数据过滤和初始化勾选的资源操作。

摘要由CSDN通过智能技术生成

需求背景：角色管理资源，资源返回树形结构数据，左侧树形展示列表可查询，右侧勾选资源权限平铺。

本身组件不支持全选，所以增加了全选按钮。覆写了级联面板宽度。可传只勾选code或者顺序当前节点二维数组列表。

效果

因未配置id报错

<el-checkbox v-model="isAllSelected" @change="handleAllSelectedChange" style=" margin-left: 20px;">全选</el-checkbox>

</div>

<el-cascader-panel

v-if="dataValueOptions.length"

id="cascaderPanel" 一定要有防止动态生成时，组件报错 option.level 找不到

ref="cascaderPanel"

v-model="selectedValues"

:key="cascaderPanelKey"

:options="dataValueOptions"

:props="{

expandTrigger: 'click',

checkStrictly: false,

multiple: isMultiple,

emitPath: false, 决定勾选以及初始化选中数据结果

value: 'code',

label: 'name',

@change="handleSelected"

placeholder="请选择"

style="width: 100%; height: 400px; overflow-x: auto;"

:filter-method="dataFilter"

filterable

</template>

</el-cascader-panel>

</div>

return {

relations: [{

content: '角色'

}, {

content: '应用',

}],

sureLoad: false,

roleInfo: {},

leftLoad: false,

selectApp: {},

appName: "",

appList: [],

defaultExpandKeys: [],

defaultProps: {

children: 'children',

label: 'name'

searchLoad: false,

resourceList: [],

rightLoad: false,

isMultiple: true,

selectedValues: [],

dataValueOptions: [],

isAllSelected: false,

cascaderPanelKey: ""

}

// 存储初始化勾选的资源

initSelectedCodes(data) {

for (let i = 0; i < data.length; i++) {

const node = data[i]

if (node.selected) {

this.selectedValues.push(node.code)

}

if (node.children) {

this.initSelectedCodes(node.children)

}

getAppResourceTree(appId) {

this.rightLoad = true

const params = {

appId: appId,

roleCode: this.roleInfo.code

}

this.$api.getResourceTreeByAppId(params).then(res => {

this.rightLoad = false

if (res.code === '0') {

// 左侧级联选择器默认数据

this.dataValueOptions = res.result

// 动态设置key值防止报level错误

this.cascaderPanelKey = Date.now()

// 级联选择器默认选中数据

if (this.dataValueOptions.length) {

this.initSelectedCodes(this.dataValueOptions)

// 数据初始化完成且组件已渲染

this.$nextTick(() => {

this.handleSelected()

})

}

}).catch((err) => {

this.$message.error(err)

this.rightLoad = false

})

handleSelected() {

if (this.dataValueOptions.length) {

// 获取所有codes，如果长度跟选中长度一致说明是全选，否则部分选中

const codes = []

this.getAllCodes(this.dataValueOptions, codes)

if (this.$refs.cascaderPanel && this.selectedValues && this.selectedValues.length) {

this.isAllSelected = codes.length === this.$refs.cascaderPanel.getCheckedNodes().length

}

dataFilter(node, val){

const baseName = node.data.baseName.toUpperCase()

const baseValue = node.data.baseValue.toUpperCase()

const inputVal = val.toUpperCase()

if(baseName.indexOf(inputVal) !== -1 || baseValue.indexOf(inputVal) !== -1){

return true

}

resetQuery() {

this.isAllSelected = false

this.appName = ""

this.resourceList = []

this.selectedValues = []

this.dataValueOptions = []

this.getAppList()

}

// 额外方法，如果后台需要勾选的节点的所有顺序父节点包括勾选的节点

findParentCodes(treeData, selectedCode, parentCodes = []) {

for (let i = 0; i < treeData.length; i++) {

const node = treeData[i]

if (node.code === selectedCode) {

return [...parentCodes, node.code]

}

if (node.children) {

const result = this.findParentCodes(node.children, selectedCode, [...parentCodes, node.code])

if (result) {

return result

}

return null;

}

方法使用。

for (let i = 0; i < this.selectedRootCodes.length; i++) {

const selectedRootCode = this.selectedRootCodes[i]

if (selectedRootCode) {

const selectedCodes = this.findParentCodes(this.dataValueOptions, selectedRootCode)

if (selectedCodes.length) {

this.selectedValues.push(selectedCodes)

}

/* 自定义面板样式 */

#right .el-cascader-menu__wrap,

#right .el-scrollbar__wrap {

overflow-x: auto;

overflow-y: hidden;

height: 404px;

margin-right: 0px !important;

}

————————————————

原文链接：https://blog.csdn.net/huangjinsheng1988/article/details/134210589