在vue中使用checkbox

在vue项目中如何使用多选框？结合前段时间工作中的需求写了这个笔记。

在template里面写入<input>标签并指定类型type为checkbox，:value用来绑定当前项的value，v-model绑定一个数组，一旦当前项被选中，该项的value会被添加至被绑定的数组中。

place为绑定的数组，具体效果如下图所示

Vueel-tree可以使用自定义渲染来实现每个节点后面添加输入框并保存的功能，具体步骤如下：

1. 在Vueel-tree组件中添加render属性，用于渲染树节点：

<el-tree :data="data" :render-content="renderContent"></el-tree>

2. 在methods中定义renderContent函数，用于渲染树节点：

methods: { renderContent(h, { node, data }) { return h('span', [ h('span', node.label), h('el-input', { props: { value: data.inputValue }, on: { input: val =>{ data.inputValue = val } } }) ]) } }

3. 在data中定义inputValue，用于保存输入框的值：

data() { return { data: [], inputValue: '' } }

4. 在Vueel-tree组件中添加node-key属性，用于设置节点的key值：

<el-tree :data="data" :render-content="renderContent" node-key="id"></el-tree>

5. 在data中定义id，用于设置节点的key值：

data() { return { data: [ { id: 1, label: 'node1' }, { id: 2, label: 'node2' } ], inputValue: '' } }

这样，就可以在Vueel-tree组件中实现每个节点后面添加输入框并保存的功能了。

使用场景：

最近就遇到关于公司组织架构的应用场景，既要显示公司职员的树形组织架构，而且还可以勾选某个人进行资料的查询，并且支持多选

通过设置 el-tree 组件的 show-checkbox 属性为 true ，将节点置为可被选择状态。

这里的问题是怎么支持多选的问题，该组件 check-strictly 属性设置为 false 的时候，可选中父节点来选中所有下面的子节点。没有层级限制，一直到最终的叶子节点。而我们的需求是只想选中某一层级的节点。对于管理人员来说，他只关心下面最直接的下属，进行相关的 *** 作。

我们拿到的树形数据结构如下：

我的做法是添加了 el-checkbox 组件，首先算出树形结构数据的最大深度值，然后循环输出所有的层级选择框

接下来就是通过选中层级，找出该深度下的所有员工，以数组的形式进行存储

el-tree 控件的 default-checked-keys 属性可以设置默认选中的节点，我们通过改变这个值来间接达到选中的目的。 default-expanded-keys 属性为展开节点的控制值，当我们选中某个节点的时候，为了能直接看到该节点，还需要展开与它相关的上级所有的节点。

最后我们监听 checkbox 的值（所有选中值组成的数组），循环层级数组，通过获取某个层级的节点，拼接成最终所有的节点，然后通过该组件内部方法 setCheckedKeys 来设置选中状态。

这里需要注意的是控制展开的数组值，当我们选中二级时，所有的一级应该展开，选中三级，二级所有的节点应该展开，依次类推。

我们拿到选中层级数组，算出里面的最大层级，然后通过最大层级的值减去1算出该层级下的所有节点，就可以展开所有选中节点。（这里有个规则就是展开深度大的节点时外层节点一定是展开的）

---