Element UI 表格点击下拉展示子表格：实现步骤及示例代码

\u003ctemplate\u003e\n \u003cel-table :data\u003d"tableData"\u003e\n \u003cel-table-column prop\u003d"name" label\u003d"姓名"\u003e\u003c/el-table-column\u003e\n \u003cel-table-column prop\u003d"age" label\u003d"年龄"\u003e\u003c/el-table-column\u003e\n \u003cel-table-column label\u003d"操作"\u003e\n \u003ctemplate slot-scope\u003d"scope"\u003e\n \u003cel-button @click\u003d"toggleChildTable(scope.row)"\u003e下拉展示\u003c/el-button\u003e\n \u003c/template\u003e\n \u003c/el-table-column\u003e\n \u003cel-table-column label\u003d"子表格" v-if\u003d"showChildTable"\u003e\n \u003ctemplate slot-scope\u003d"scope"\u003e\n \u003cel-table :data\u003d"scope.row.childTableData"\u003e\n \u003cel-table-column prop\u003d"childName" label\u003d"子姓名"\u003e\u003c/el-table-column\u003e\n \u003cel-table-column prop\u003d"childAge" label\u003d"子年龄"\u003e\u003c/el-table-column\u003e\n \u003c/el-table\u003e\n \u003c/template\u003e\n \u003c/el-table-column\u003e\n \u003c/el-table\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n data() {\n return {\n tableData: [\n { name: '张三', age: 18, childTableData: [{ childName: '子姓名1', childAge: 5 }] },\n { name: '李四', age: 20, childTableData: [{ childName: '子姓名2', childAge: 6 }] },\n { name: '王五', age: 22, childTableData: [{ childName: '子姓名3', childAge: 7 }] }\n ],\n showChildTable: false\n };\n },\n methods: {\n toggleChildTable(row) {\n row.showChildTable = !row.showChildTable;\n }\n }\n};\n\u003c/script\u003e