转自博客园 VUE2 element-UL 树形控件 只显示子级菜单的复选框 - 张铄洋 - 博客园

HTML 部分

<div class="wrap">
<el-tree :data="testData" ref="tree" show-checkbox :check-strictly="true" :default-expand-all="true" node-key="id" :props="defaultProps" @check-change="treeCheckedChange">
</div>

data 数据

data() {
    return: {
      testData: [],
      treeData: [
        {
          id: 1,
          label: '第一章',
          children: [
            {
              id: 4,
              label: '第一节'
            },
            {
              id: 5,
              label: '第二节'
            },
            {
              id: 6,
              label: '第三节'
            }
          ]
        },
        {
          id: 2,
          label: '第二章',
          children: [
            {
              id: 7,
              label: '第四节'
            },
            {
              id: 8,
              label: '第五节'
            }
          ]
        },
        {
          id: 3,
          label: '第三章',
          children: [
            {
              id: 9,
              label: '第六节'
            },
            {
              id: 10,
              label: '第七节'
            }
          ]
        }
      ],
    }
}

methods 代码

methods: {

formatData(params) {
      let data = params
      data.map(item => {
        if (item.hasOwnProperty('children')) {
          item.disabled = true
          this.formatData(item.children)
        }
      })
      return data
    },
    treeCheckedChange(data, isChecked) {
      if (isChecked) {
        const checked = [data.id] // id为tree的node-key属性
        this.$refs.tree.setCheckedKeys(checked)
      }
    },
}

mounted 调用　　

mounted() {
    this.testData = this.formatData(this.treeData)
}

最后加一点点 css

/deep/.wrap .el-checkbox__input.is-disabled {
  display: none;
}

这里注意 ： data 里的数据有两个   testData: [], treeData: [] , 注意区分