elementui tree设置节点半选解决方案

elementui tree回显节点半选解决方案

昨天又遇到了elementui的组件的坑…

问题分析

前端开发告诉我说【tree组件因为存了后台存储了全部的节点，页面回显时，因为父节点的关系，把子节点也全部勾上了，现在没法处理，必须要改接口加上半选节点的参数保存起来，再在回显时调用接口获取到半选的节点】。

不得不说，这的确是一个解决方案，但并不是一个好的解决方案。该接口固然能实现这个需求，但是要知道接口的改动会带来一系列意想不到的变化，比如数据库，缓存，接口参数和返回值，而且在已经集成好的接口上拓展新的变化，根据螺旋式开发规则的风险变化，BUG会随着螺旋的增大而急剧增大。虽然这个问题比较小，只是多存储了一些Service端用不上属性而已，但只是因为组件升级或bug，就需要改动功能无问题的接口，这并不是好的开发模式。作为一名优秀的开发者，首先想到的是应该用自己的办法去解决对接的问题，如果实在没有办法，再考虑两端协调的修改。

从业务分析来看 Service不论是check还是halfCheck都是必要的数据。但view端需要区分check,halfCheck来显示不同的图标，这就很矛盾了，可目的也很明确前端需要区分出半选节点。

那么怎么改才是最合理的呢？当然是利用JS处理回显的逻辑，这样即使组件变化或BUG依旧不会去改变接口。如果通过改接口修正好了，那若控件升级或bug，难道还要一改再改接口吗，当然不能。接口的设计不可能满足所有组件的需求，但它一定满足业务。既然可以通过自己控制，就没有必要去做一些更繁琐的工作，不是吗？

废话不多说了，下面看代码！

解决方案

html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
<el-tree 
  ref="menuListTree"
  :data="data"
  show-checkbox
  node-key="id"
  :default-expand-all="true"
  :expand-on-click-node="false"
  :props="defaultProps">
</el-tree>
</div>

css

@import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");

JS

new Vue({
	el: '#app',
	data: function() {
		return {
			data: [{
				id: "1",
				label: '1',
				children: [{
					id: "2",
					label: '2-1',
					children: [{
						id: "21",
						label: '2-1-1'
					}, {
						id: "22",
						label: '2-1-2'
					}]
				}, {
					id: "3",
					label: '2-2',
					children: [{
						id: "31",
						label: '2-2-1'
					}, {
						id: "32",
						label: ' 2-2-2'
					}]
				}]
			}],
			checkStrictly: true,
			defaultProps: {
				children: 'children',
				label: 'label'
			}
		}
	},
	mounted() {
    var that = this;
    ["1", "2", "22", "3", "31","32"].forEach((i) => {
      var node = that.$refs.menuListTree.getNode(i);
      console.log(node.isLeaf) //true||false
      if(node.isLeaf){
        that.$refs.menuListTree.setChecked(node, true);
      }
    });
	}
});