ElementPlus el-tree-select设置禁选项
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题:要求使用el-tree-select展示选项,设定第一层级禁用,禁止选择,除第一层外的皆可选择
解决过程:
1.TreeSelect 树形选择是含有下拉菜单的树形选择器,结合了 el-tree 和 el-select 两个组件的功能。
2.Tree 树形控件的Props中有disabled,指定节点选择框是否禁用为节点对象的某个属性值
3.disabled的使用方法是需要在接收下拉框的数据中,哪一层级需要禁用,则在该层级下的数据里加上disabled=true的属性值
4.数据中可能包括很多层children,使用递归方法找到所有符合条件的层级加上disabled=true
5.el-tree-select在读取数据时,识别层级属性带有disabled=true,则该层级会被禁用
6.以下的例子中是根据type进行判断(此处可根据自己的实际需求进行修改),type=3的层皆会被禁用
7.禁用的层级字体颜色会变浅,修改禁用层级字体颜色与其他层级相同
解决结果:
//default-expand-all是默认全部展开
<el-tree-select
v-model="state.addForm.pid"
style="width: 280px"
:data="state.pData"
check-strictly
clearable
:render-after-expand="false"
default-expand-all
/>
import { reactive } from 'vue'
const state = reactive({
pData: [],
})
//递归处理
const recursionData = data =>{
data.forEach(item => {
item.disabled = item.type==3?true:false
if (item.children !== null && item.children.length !== 0) {
recursionData(item.children)
}
})
return data
}
//获取数据
const getPData = type => {
const params = {
type: '1,3'
}
//此处getData改成个人的接口方法即可
getData(params).then(res => {
if (res.data.code === 0) {
state.pData = recursionData(res.data.data) || []
}
})
}
//设置禁选项字体颜色,注意此处没有scoped哦
<style lang="scss">
.el-select-dropdown__item.is-disabled{
color: #606266 !important;
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献12条内容
所有评论(0)