实现element表格行 点击某一字段下拉框显示更多信息的效果

效果:

实现:
data数据模拟:

      tableData:[
        {
          houseList:[
            {house:"新希望乐城-3栋1单元2504",index:1},
            {house:"新希望乐城-3栋1单元2503",index:2}
          ]
        }
      ],

需求是不用点击切换,然后默认展示第一个,点击展示所有:

 <el-table :data="tableData" border style="width: 100%" height="100%">
   <el-table-column prop="house" label="房屋" key="aa" align="center">
     <template slot-scope="scope">
       <el-popover
         placement="bottom"
         width="400"
         trigger="click">
         <ul v-for="(item,index) in scope.row.houseList" :key="index">
           <li>{
   
   {item.house}}</li>
         </ul>
         <span slot="reference" type="text"{
   
   {scope.row.houseList[0].house}}
           <i class="el-icon-arrow-down"></i>
         </span>
       </el-popover>
     </template>  
   </el-table-column>
 </el-table>