elementui 树形表格 全部展开及收起功能

elementui: v2.12.0
主要方法: toggleRowExpansion

方法名说明参数
toggleRowExpansion用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开)row, expanded

使用: this.$refs.theTable.toggleRowExpansion(row, true)
需求简说: 树形表格上方提供两个按钮: “展开全部” “收起全部”
逻辑简说: 递归遍历赋给表格的值(tableData),依次展开或收起每一行

forArr(arr, isExpand) {
  arr.forEach(i => {
    this.$refs.theTable.toggleRowExpansion(i, isExpand)
    if (i.children) {
      this.forArr(i.children, isExpand)
    }
  })
},
expandAll() { // 默认展开全部的话,首次加载需要在$nextTick下进行
  this.forArr(this.tableData, true)
},
collapseAll() {
  this.forArr(this.tableData, false)
}

用了很多方法,折腾了好久,这个是最简单粗暴起效的,所以说,还是要多看api啊…
在这里插入图片描述

  • 12
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
对于 ElementUI树形表格中的子节点展开行表单,你可以在表格的 `row-template` 中使用 `v-if` 来判断当前行是否为父节点,如果是,则渲染表单的内容。当用户点击父节点的展开按钮时,可以通过 `row-expand` 事件来获取当前父节点的信息,然后使用 `toggleRowExpansion` 方法将子节点展开,并在展开的子节点中渲染表单。 以下是一个简单的示例代码: ``` <template> <el-table :data="tableData" :row-key="row => row.id" :expand-row-keys="expandedKeys" @row-expand="handleRowExpand"> <el-table-column type="expand"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template v-slot="scope"> <el-button v-if="scope.row.isParent" @click="toggleExpansion(scope.row)">展开</el-button> </template> </el-table-column> <el-table-column label="表单" :row-template="scope => rowTemplate(scope.row)"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '父节点1', isParent: true, address: '地址1', form: { username: '', age: '' } }, { id: 2, name: '子节点1-1', parentId: 1, address: '地址2', form: {} }, { id: 3, name: '子节点1-2', parentId: 1, address: '地址3', form: {} }, { id: 4, name: '父节点2', isParent: true, address: '地址4', form: { email: '', phone: '' } }, { id: 5, name: '子节点2-1', parentId: 4, address: '地址5', form: {} }, { id: 6, name: '子节点2-2', parentId: 4, address: '地址6', form: {} }, ], expandedKeys: [], }; }, methods: { rowTemplate(row) { if (row.isParent) { return ( <el-form> <el-form-item label="用户名"> <el-input v-model={row.form.username}></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model={row.form.age}></el-input> </el-form-item> </el-form> ); } return null; }, toggleExpansion(row) { this.$refs.table.toggleRowExpansion(row); }, handleRowExpand(row) { if (row.isParent) { this.expandedKeys.push(row.id); } }, }, }; </script> ``` 在这个示例中,我们使用 `row-template` 来渲染表格的每一行,如果当前行是父节点,则渲染一个包含用户名和年龄输入框的表单。点击父节点的展开按钮时,我们使用 `toggleRowExpansion` 方法将子节点展开,并将展开的父节点的 `id` 添加到 `expandedKeys` 数组中。当子节点展开时,会自动渲染子节点的内容,这里我们并没有在子节点中渲染表单。你可以根据需要自行调整代码。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值