el-table自界说按钮控制扩展expand

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

   将type=“expand”的表格列的宽度设置为width="1"，让该操作列不展示出来，然后通过ref动态调用组件的内部方法toggleRowExpansion(row, row.expanded)控制扩展内容的显隐题目。
    关于动态收起所有展开项
可以通过遍历tableData，调用toggleRowExpansion(row, false)关闭
  

1. <template>
2.   <el-table
3.     :data="tableData"
4.     ref="table"
5.    <el-table-column
6.       label="商品 ID"
7.       prop="id">
8.    </el-table-column>
9.    <el-table-column label="操作">
10.       <template slot-scope="{ row }">
11.          <el-button type="text" @click="toggleExpand(row)" size="mini">
12.           详情<i :class="row.expanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
13.          </el-button>
14.       </template>
15.    </el-table-column>
16.    <el-table-column type="expand">
17.       <template slot-scope="props">
18.           <span>{{ props.row.detail}}</span>         
19.       </template>
20.    </el-table-column>
21.   </el-table>
22. </template>
24. <script>
25.   export default {
26.     data() {
27.       return {
28.         tableData: [{
29.           detail: '好滋好味鸡蛋仔',
30.           id: '12987122',
31.         },
32.         {
33.           detail: '好滋好味鸡蛋仔22',
34.           id: '12987123',
35.         }]
36.       }
37.     },
38.     methods:{
39.     // 展开单项
40.      async toggleExpand(row) {
41.       //   如果需要远程获取详情数据
42.       // if (!row.detail) {
43.       //   const { data, code } = await xxx({});
44.       //   if (code === 0) {
45.       //     row.detail= data;
46.       //   }
47.       // }
48.       row.expanded = !row.expanded;
49.       this.$refs.table.toggleRowExpansion(row, row.expanded);
50.     },
51.     // 遍历tableData，收起所有展开项
52.     clearAllExpand() {     
53.       const tableInstance = this.$refs.mulSelectTable;
54.       this.tableData.forEach(row => {
55.         tableInstance.toggleRowExpansion(row, false); // 遍历每一行，调用方法并传入false来关闭展开状态
56.       });
57.     },
58.   }
59.   }
60. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。