elementPlus el-table + el-textarea + el-popover实现表格项嵌套可自动换行的选择器

今天项目遇到一个需求，表格项中的选择器需要根据文本内容的长度实现自动换行，原先使用select选择器穿透修改样式只能实现固定高度，如图：

 穿透无法使高度自适应

所以使用el-textarea配合popover：

（外层还有一层el-table）

 

 popover弹窗用来显示选项内容，通过v-model绑定table的scope：

                v-model="scope.row[item.name]"

实现点击选项切换文本域中的内容，

存在多个popover，点击选项完隐藏popover处理方法：

1. :ref="`popover-${scope.$index}-${index}`"    ===>两个索引的原因是我一行内有两个popover

 2. @click="scope.row[item.name]=item2.value;closePopover(scope.$index,index);"

 3. const closePopover=(ind1,ind2)=>{

    const refArr=proxy.$refs[`popover-${ind1}-${ind2}`]

    refArr[0].hide()

  }

需要用到$refs来获得popover组件的hide方法，传入索引找到匹配的弹窗组件去进行隐藏。实现如图：