elementui级联选择器一级选择框不显示

elementui级联选择器一级选择框不显示：问题 elementui接收树形结构的数据并用级联选择器显示时，后端会对每一个结点都加一个children属性，导致显示错误并且选择无效。 解决方式 这个时候，既可以前端工程循环遍历将children属性置为null，也可以在后端工程建立树形结构时对叶子节点的children赋值null。

最近有了新的需求，要求可以展示一棵机构树，然后可以选择某些节点。所选节点如果它和它的兄弟节点都被选中，那么所选结果就是它们的父节点。

如下例子：

选择三级1-1-1、三级1-1-2（或二级1-1），所得结果为一级1；选择二级2-1、二级2-2，所得结果一级2

项目使用Element UI框架，查找了tree组件对外接口，没有提供，然后自己结合tree组件的方法实现一下

在点击某个节点，选择状态完成更新后的回调函数中，判断当前点击节点的父节点是否选中，若选中，就把该父节点下的所有子节点从结果数组中移除，把当前节点加入结果数组，然后判断该父节点的父节点是否选中，循环上述步骤直到它们的根节点或状态为未选中；若该父节点未选中，检查当前节点状态是否为选中，选中，则加入结果数组，否则就认为是当前点击 *** 作取消了之前的选中状态，那么就需要在结果数组中删除当前点击项，考虑到之前可能是点击节点的父节点被选中状态，所以需要针对这个情况，需要在结果数组中删除父节点项，加入除当前点击项外的兄弟节点项（因为结果数组中存储的是最高一层的所选节点，所以不需要处理点击项的子节点）

tree组件中

使用方法

展示时删除某一选中项

在element+vue项目中，需求要表格内已有数据，点击新增在首行添加一行带输入框内容

table的数据为datas=[],那么下面是一列的数据，多列可循环或复制

　<el-table-column

prop="name"

label="件号"

sortable

show-overflow-tooltip:

true

align="center"

width="180"

>

<template slot-scope="scope">

<template

v-if="scope.row.show"

>

<el-form-item

label=" "

prop="name"

>

<el-input

v-model="ruleForm.name"

disabled="true"

size="mini"

>

<i

slot="suffix"

class="el-input__icon el-icon-search"

@click="Partnum"

/>

</el-input>

</el-form-item>

</template>

<template v-else>

<span @click="partNumber(scope.$index, scope.row)">{{ scope.row.name }}</span>

</template>

</template>

</el-table-column>

这思路主要是template里面还有2个template，在data数组的 *** 作中每条加一个属性show来控制是显示输入框还是里面的某个字段，

addBtn () {// 添加按钮事件

let data = { show: true }

this.datasNew.unshift(data)

},

同思路可自定义添加各种属性给表格做相应 *** 作。

---