element ui 表格中点击下拉展示子表格 应该如何实现

要在Element UI表格中实现点击下拉展示子表格，可以使用Element UI的自定义模板功能。

首先，需要在表格的列定义中添加一个自定义模板列。在该列中，可以使用v-if和v-else指令来判断是否展示子表格。当点击下拉按钮时，可以切换showChildTable的值来控制子表格的显示和隐藏。

下面是一个示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="toggleChildTable(scope.row)">下拉展示</el-button>
      </template>
    </el-table-column>
    <el-table-column label="子表格" v-if="showChildTable">
      <template slot-scope="scope">
        <el-table :data="scope.row.childTableData">
          <el-table-column prop="childName" label="子姓名"></el-table-column>
          <el-table-column prop="childAge" label="子年龄"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, childTableData: [{ childName: '子姓名1', childAge: 5 }] },
        { name: '李四', age: 20, childTableData: [{ childName: '子姓名2', childAge: 6 }] },
        { name: '王五', age: 22, childTableData: [{ childName: '子姓名3', childAge: 7 }] }
      ],
      showChildTable: false
    };
  },
  methods: {
    toggleChildTable(row) {
      row.showChildTable = !row.showChildTable;
    }
  }
};
</script>

在上述示例代码中，tableData数组中的每个对象都有一个childTableData属性，该属性存储了子表格的数据。在点击下拉按钮时，通过toggleChildTable方法来切换showChildTable的值，从而控制子表格的显示和隐藏。

注意，要在el-table-column标签中使用slot-scope属性来访问当前行的数据，从而在子表格中使用