当前位置：首页 > news >正文

el-table自定义按钮控制扩展expand

news 2025/7/13 18:45:06

需求：自定义按钮实现表格扩展内容的展开和收起，实现如下：

将type=“expand”的表格列的宽度设置为width="1"，让该操作列不展示出来，然后通过ref动态调用组件的内部方法toggleRowExpansion(row, row.expanded)控制扩展内容的显隐问题。

关于动态收起所有展开项
可以通过遍历tableData，调用toggleRowExpansion(row, false)关闭

自定义expand

<template><el-table:data="tableData"ref="table"<el-table-columnlabel="商品 ID"prop="id"></el-table-column><el-table-column label="操作"><template slot-scope="{ row }"><el-button type="text" @click="toggleExpand(row)" size="mini">详情<i :class="row.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button></template></el-table-column><el-table-column type="expand"><template slot-scope="props"><span>{{ props.row.detail}}</span>         </template></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{detail: '好滋好味鸡蛋仔',id: '12987122',},{detail: '好滋好味鸡蛋仔22',id: '12987123',}]}},methods:{// 展开单项async toggleExpand(row) {//   如果需要远程获取详情数据// if (!row.detail) {//   const { data, code } = await xxx({});//   if (code === 0) {//     row.detail= data;//   }// }row.expanded = !row.expanded;this.$refs.table.toggleRowExpansion(row, row.expanded);},// 遍历tableData，收起所有展开项clearAllExpand() {     const tableInstance = this.$refs.mulSelectTable;this.tableData.forEach(row => {tableInstance.toggleRowExpansion(row, false); // 遍历每一行，调用方法并传入false来关闭展开状态});},}}
</script>