element中動態Tooltip 內容過長

<el-table-column label="評價內容" style="width: 30%;" :show-overflow-tooltip="true">
   <template slot-scope="scope">
      {{ scope.row.content || "-" }}
       <el-tooltip
          :content="scope.row.content"
          placement="top">
       </el-tooltip>
   </template>
</el-table-column>

第一種就是使用 el-tooltip 加上 :show-overflow-tooltip="true" （超出表格長度會自動省略）進行實現，但是這種 tooltip 內容還是過長 還超出了屏幕范圍

 

<el-table-column label="評價內容" style="width: 30%;">
   <template slot-scope="scope">
      <el-popover placement="top-start" title="評價內容" width="500" trigger="hover" >
         <div>{{scope.row.content}}</div>
         <span slot="reference">{{ scope.row.content.substr(0,30)+'...' }}</span>
      </el-popover>
   </template>
</el-table-column>

第二種，用 el-popover，substr 限制提示內容 一行的字數，width 可自行調節，trigger 移入事件