你不知道的vue——tree组件实现默认禁用选项

实现效果

作为一个前端狗，需求有多奇葩，开发的脑洞就有多大。
先给你们看看产品想实现的功能：

既可以实现概况的全选功能，又要实现只选中概况，这明显是矛盾的

但是问题来了，这个效果图却可以实现这个需求，神奇不神奇！！

然后细细研究发现，虽然查看浏览是不能点击的，但是他里面的状态是可以更改的，这压根就是一个禁用的复选框覆盖掉了查看浏览这个节点！！

解决思路

所以接下来的事情就好办了，只要我们把查看浏览这个复选框用一个提前写好的禁用复选框覆盖掉就好了
那么哪里来的禁用复选框呢？
发现element-ui的tree组件里有个自定义节点内容

我用的是render-content，这样方便判断是哪一个需要用到禁用的复选框

代码

使用element-ui的tree组件

<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="id"
default-expand-all
:render-content="renderContent"
/>

通过renderContent返回渲染的元素

data(){
	return {
		isShow: true
	}
},
method: {
	renderContent(h, { node, data, store }) {
      // 如果data.label为查看浏览，则禁用复选框
      if (data.label === '查看浏览') {
        return (
          <span class='custom-tree-node'>
            <span class='dis-text'>{node.label}</span>
            // 禁用的复选框
            <el-checkbox class='dis-checkbox' v-model={this.isShow} disabled />
          </span>
        );
      }
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
        </span>
      );
    }
}

css把custom-tree-node设置为相对定位，把复选框设置为绝对定位，定位到原来的复选框中

.custom-tree-node {
	position: relative;

	.dis-text{
		color: #c0c4cc;
	}

	.dis-checkbox {
		position: absolute;
		top: 0;
		left: -22px;
	}
}