elementUI树状多选表格

最新推荐文章于 2025-06-19 22:26:51 发布

原创

最新推荐文章于 2025-06-19 22:26:51 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

本文介绍了如何使用ElementUI创建带有树形结构的多选表格，并实现已选择项的回显功能。同时，表格支持展开和折叠操作。在处理数据时，遇到内容修改的问题，通过Vue的$set方法解决了直接赋值导致的无法修改问题。由于甲方需求变化，最终未采用此方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

树状多选表格需回显已选择的可控制展开收起

<el-button v-if="!fold" @click="foldShow">
   <i color="pink" class="el-icon-circle-plus"></i>全部展开
</el-button>
<el-button v-if="fold" @click="foldNone">
  <i color="pink" class="el-icon-remove"></i>全部收起
</el-button>
<el-table v-loading="loading" :data="deptList" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" ref="checkTable" @select="select" @select-all="selectAll" @selection-change="selChange">
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column prop="roadName" label="路线编号" ></el-table-column>
   <el-table-column prop="name" label="路线编号及所属公司"></el-table-column>
</el-table>