问题:要求使用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
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐