问题:要求使用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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐