需要实现的需求:
1.el-table多选框选中,左边对应的树状多选框勾选
2.el-table多页全选功能:在当前页点击多页全选按钮,当前树状节点对应的el-table全部数据全部选中,并且可以回显实现增删改功能
比较啰嗦,可以直接点目录跳到指定部分内容
左边el-tree功能实现分析
1.开启多选框: show-checkbox="true",参考官网api
2.禁用:每一层的树状结点的数据都要有disabled属性,并且disabled="true"
3.支持节点搜索:参考官网节点过滤部分:Element - The world's most popular Vue UI framework
4.节点名称过长显示...并且出现tooltip:在el-tree使用作用域插槽slot-scope添加el-tooltip改写el-tree原来节点
参考: elementui中el-tree实现复选框全部禁用_咖啡壶子的博客-CSDN博客
----------------------------------------------------------------------------分割线 ------------------------------------------
实现
template部分代码
// 部门上方搜索框
<el-input
v-model="filtext"
clearable
placeholder="请输入"
prefix-icon="el-icon-search"
size="small"
/>
// 树状控件
<el-tree
ref="tree"
show-checkbox // 开启多选
:check-strictly="true" // 取消父子联动
:data="treeData"
:expand-on-click-node="false"
:filter-node-method="filterNode" // 支持节点搜索
:props="defaultProps"
:default-expand-all="true" // 默认展开全部
:default-checked-keys="treeCheckedKeys()" // 默认勾选
highlight-current // 高亮
node-key="id"
@node-click="handleNodeClick" // 点击节点切换右边表格数据
>
// 节点过长悬浮el-tooltip显示全名
<span class="span-ellipsis" slot-scope="{ node, data }">
<el-tooltip effect="dark" :content="node.label" placement="top-start">
<span :title="node.label">{
{ node.label }}</span>
</el-tooltip>
</span>
</el-tree>
1.开启多选:实现看te