elementui中的el-table 中show-overflow-tooltip自定义样式

elementui中的el-table 中show-overflow-tooltip自定义样式
背景：表格一行中描述列有时候内容太长，可设置show-overflow-tooltip参数来控制显示方式，默认配置显示如下：

			    <el-table-column prop="description" label="描述" width="180" :show-overflow-tooltip="true"></el-table-column>

但是只显示一行，占满了整个屏幕，不好看，如下所示：

该显示方式不满足需求，需要自定义样式 代码如下：

  <el-table-column prop="description" label="描述">
              <template slot-scope="scope">
                <el-popover placement="left" trigger="hover">
                  <template>
                    <div
                      class="set-popper"
                      v-html="scope.row.description"
                    ></div>
                  </template>
                  <div slot="reference" class="set-content">
                    {{ scope.row.description }}
                  </div>
                </el-popover>
              </template>
            </el-table-column>

删除show-overflow-tooltip配置，通过template里面自定义el-popover组件，placement参数为显示位置，v-html绑定的是popover显示内容，slot="reference"为table中该行显示内容，对应给两个class设置如下样式。给popover内容设置固定宽度，给表格内容设置超出一行显示…

.set-popper {
  width:500px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

最终展示效果如下：