1 打开一个vue文件，添加一个el-tree树形控件,设置组件的值为数组。如图 2 在el-tree树形控件上添加show-checkbox属性，用于显示勾选框框。如图 3 保存vue文件后使用浏览器打开，这时候就可以看到树形控件显示勾选框了。如图
el-tree只有叶子节点才显示勾选框 <el-treeclass="tree":check-strictly="true":data="datatree":render-content="eventRender":show-checkbox="true" //首先引用tree的时候全部显示选择框:props="defaultProps"ref="reTree"node-key="treeID"@node-click="handleNodeClick"@check="currentData"></el-tree> ...
修改样式 /deep/ .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox { display: none; } 就可以了
.el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .el-checkbox .el-checkbox__inner { display: none; } } 1. 2. 3. 4. 5. 6. 7. 8. 参考: ElementUI tree 所有叶子节点设置显示复选框,父节点不显示...
使用el-tree组件,渲染树状数据。 要求默认全部展开、不显示复选框、支持单选、以及点击父级节点时不折叠子节点。 当然,还有个小细节就是,点击当前节点要高亮显示。 用过el-tree组件的朋友,肯定清楚,el-tree默认只支持多选。而且,除了支持单选,其它需求都可以使用现成的配置属性来实现。
2.如果想根据后台返回的数据来控制不同的节点是否显示复选框,则需要改变源码来解决。 首先找到elementUI 在node_modules中的位置,在找到elementUI文件夹下的packages,这时,我们看到该文件夹中的tree,把tree文件夹拷贝到我们所需要的文件中,然后可以修改源码了。
至此,el-tree的功能基本实现,默认树节点没有复选框,每当点击加载判断子树若是最后一级则给该节点加上复选框,大体思路就是这样。(是不是最后一级后台会同时发送给前端) load方法如下: loadNode(node, resolve) { //置空需要接受的子组件数组 this.acceptVueComp=[]; ...
el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] ...
不可以设置。el-tree里面的选择框，虽然是复选框，但是只能选择一个。若后台返回的是所有的树形节点，如何使全选框选中，结构构成（两个复选框+树形结构）。